Single video page - video size

Post

Posted
Rating:
#8718 (In Topic #2939)
Avatar
Standard member
walterhpdx is in the usergroup ‘Fan in action’

The size of a video on the page

I'm gonna apologize in advance if this is a dumb question, but I'm still learning (learning quite a lot, thanks to the tutorials!).

I've about 1,800 videos from an old Flash based site that I need to upload to my Composr instance, which is fine (I'll get the database structure, create the users, and then migrate the videos & insert the relevant data via SQL).  The only oddity that I've found is when you open one of the videos, even though the resolution is, say 500x300, it will open in the ENTIRE free space of the window. Can this be changed?

Screenshot attached.
Image

composr.png

composr.png

(Click to enlarge)



Online now: No Back to the top

Post

Posted
Rating:
#8721
Avatar
Standard member
walterhpdx is in the usergroup ‘Fan in action’
So going with Fixed Width makes the videos more in line with what looks good.  I just wish I didn't have to do Fixed Width, but could specify the max size of the video window.


Online now: No Back to the top

Post

Posted
Rating:
Item has a rating of 5 (Liked by SoccerDad)
#8723
Avatar
Site director
Patrick Schmalstig is in the usergroup ‘Administrators’

walterhpdx said

I'm gonna apologize in advance if this is a dumb question, but I'm still learning (learning quite a lot, thanks to the tutorials!).

I've about 1,800 videos from an old Flash based site that I need to upload to my Composr instance, which is fine (I'll get the database structure, create the users, and then migrate the videos & insert the relevant data via SQL).  The only oddity that I've found is when you open one of the videos, even though the resolution is, say 500x300, it will open in the ENTIRE free space of the window. Can this be changed?

Screenshot attached.
Image

composr.png

composr.png

(Click to enlarge)



Hello walterhpdx .

Traditionally, the way the media player (JWPlayer) works is that it takes a height and width and sizes itself according to the aspect radio of the video. For most users, this is preferred as the video player size is always large enough to see the video while the player maintains the video's aspect ratio.

However, understandably, some users may not desire this behavior and want the player to explicitly be the size of the video. You can accomplish this by making a quick and simple edit to the template:

1) If you do not already have a custom override for it in templates_custom, copy themes/(theme name)/templates/MEDIA_VIDEO_WEBSAFE.tpl to themes/(theme name)/templates_custom/MEDIA_VIDEO_WEBSAFE.tpl.

2) Edit themes/(theme name)/templates_custom/MEDIA_VIDEO_WEBSAFE.tpl.

3) Scroll down to

Code

{$,Scale to a maximum width because we can always maximise - for object/embed players we can use max-width for this}
                {+START,IF_NON_EMPTY,{WIDTH}}
                    //width: {$MIN%,950,{WIDTH}},
                {+END}
                {+START,IF_NON_EMPTY,{HEIGHT}}
                    //height: {$MIN%,{$MULT,{HEIGHT},{$DIV_FLOAT,950,{WIDTH}}},{HEIGHT}},
                {+END}
                width: '100%',
Replace with (and save)

Code

{$,Scale to a maximum width because we can always maximise - for object/embed players we can use max-width for this}
                {+START,IF_NON_EMPTY,{WIDTH}}
                    width: {$MIN%,950,{WIDTH}},
                {+END}
                {+START,IF_NON_EMPTY,{HEIGHT}}
                    height: {$MIN%,{$MULT,{HEIGHT},{$DIV_FLOAT,950,{WIDTH}}},{HEIGHT}},
                {+END}
                //width: '100%',
This tells JWPlayer to size itself exactly to the set dimensions of the video rather than going full-width and sizing based on aspect ratio.

(Example with 320 x 240)
image_2022_09_26T18_18_45_602Z.png

4) If you want the player to be centered on the page, also scroll down to

Code

                    onReady: function() { if (document.getElementById('next_slide')) { stop_slideshow_timer(); jwplayer('{$GET%,player_id}').play(true); } }
And replace with (and save)

Code

                    onReady: function() { 
                        if (document.getElementById('next_slide')) { 
                            stop_slideshow_timer(); 
                            jwplayer('{$GET%,player_id}').play(true); 
                        } 
                        var player = document.getElementById('{$GET%,player_id}'); 
                        player.style.margin = "auto";
                    }

This will center the player, which will look like this (though it may look a little awkward with the details box, so this is completely up to you if you want to do this step):

image_2022_09_26T18_25_32_820Z.png

Hope this helps you out. Please let us know if you have any additional concerns or questions.

  • Need support for version 10? The core development team is no-longer offering it for free (unless it's a critical bug that breaks your entire site or a serious security hole). Please consider hiring me instead if you need v10 support or a non-critical bug fix. Or, ask the community in the forums!
  • Do you enjoy Composr? Please consider contributing your talent to the project or recommending Composr to others. Even small contributions make a big impact in the Composr community.
  • Do you have feedback for us? You can report bugs, suggest features, or give feedback on the Free support options page.
  • Do you need professional service with your Composr website? Please consider contracting me for your needs through my company, PDStig, LLC. Doing so will also help fund Composr development.
  • Want to watch live streams of me developing Composr CMS? Please subscribe to me on Twitch to be notified when I stream. Composr development streams are usually spontaneous / not scheduled in advance as work priorities come first.
Online now: No Back to the top
1 guest and 0 members have just viewed this.

Statistics

Forum statistics:
  • 2,053 topics, 7,195 posts, 10,839 members
  • Our newest member is PurplewaveIndia
Birthdays:
Back to Top