Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

player height/width set as 100%?


I am working with a fluid grid template where I want the player width and height to be *100% of the containing element.* Preferably I would use the html5 video container, but do not mind if I have to use a div.

I have been using the js embed method for jwplayer

I use a template setup as such
bc.. <div class="video-wrap">
<div id="video">
</div>
</div><!-- /.video-wrap -->



Relevent css:
bc.. .video-wrap { width: 100%; }
#video {
font-size: 0.9em;
height: 0;
overflow: hidden;
padding-bottom: 53%;
padding-top: 20px;
position: relative;
}
#video embed, #video object, #video iframe {
max-height: 100%;
max-width: 100%;
height: 100%;
left: 0pt;
position: absolute;
top: 0pt;
width: 100%;
}



The HUGE benefit to setting up my player like this is that I am able to keep the player as 100% of the containing element, and also maintain the video aspect ratio upon browser resize.

This technique works perfectly for embedding youtube, vimeo, or other players.


When I try the same technique with the jwplayer, then the player is not showing up on the page. If I change to a fixed height then the player shows up fine.

However:
By setting a fixed height then the player completely breaks out of the containing element.

Here is an example of my player .js which I am trying to use:
bc.. <script type="text/javascript">
jwplayer("video").setup({
file: '<?php echo $meta['video_url']; ?>',
id: '<?php echo $id ?>',
'plugins': 'gapro-1',
'gapro.accountid': 'UA-21243-1',
'gapro.trackstats': 'true',
'gapro.trackpercentage': 'true',
'gapro.tracktime': 'true',
height: '100%',
width: '100%',
image: '<?php echo $meta['video_thumbnail']; ?>',
skin: "http://content.longtailvideo.com/skins/glow/glow.zip",
'provider':'rtmp',
'streamer':'rtmp://rtmpurl:1935/<?php echo $meta['rtmp_path']; ?>',
'modes': [
{
type:'flash',
src:'/jw/player-5-6.swf'
},
{
type:'html5',
config:{
'file':'http://rtmpurl:1935/<?php echo $meta['rtmp_path']; ?>/mp4:<?php echo $meta['video_url']; ?>/playlist.m3u8',
'provider':'video',
'id':'<?php echo $id ?>-html5'
}
}
]
});
</script>




*Please help*
I need to know what to modify in order to NOT have to use a fixed height or width for the player. Fixed heights are not going to work with a fluid template, and the only thing holding me back is getting jwplayer to 'behave' like every other player embed does.

thanks

9 Community Answers

JW Player

User  
0 rated :

@Shawn

What would be most helpful is to have a link to see. Can you provide a link?

Although this hasn't been an issue for me and I do believe that in what you are trying can be done without affecting the player BUT I stand to be corrected as I never have tried this namely using 100%.

However, a thought just came across my mind namely and I wonder if somehow the re-sizing aspect can be used. remember, I am thinking out loud here.

Resizing is possible as follows:
bc.. /* To resize the player, simply set its width and height, and send the view a ViewEvent.REDRAW event. */
private function resizePlayer() : void {
if(playerObject != null && playerObject.view != null) {
playerObject.config['width'] = player.width;
playerObject.config['height'] = player.height;
playerObject.view.sendEvent(ViewEvent.REDRAW);
}

}



I have not tried or used this so I cannot comment any further on this

JW Player

User  
0 rated :

@Willie

Thanks, actually I just managed to get it working. What I was not noticing is that the jw .js changes the container id to video_wrapper. This meant my css rules were not applying.

JW Player

User  
0 rated :

@Shawn can you post the final code that worked for you?

JW Player

User  
0 rated :

Shawn- could you please post your final working code? I am struggling with the same issue. Thanks!!!

Ethan Feldman

JW Player Support Agent  
-1 rated :

Why not just use? – http://fitvidsjs.com/

JW Player

User  
0 rated :

Because fitvidjs does not work for me. It conflicts with my current setup and fails to resize the player. Most modern browsers are now fine with resizing on the fly, even when talking flash with a video playing.

However, when jwplayer writes its html5 embed code, it ****s up. Seems like JWPlayer needs variable width & height so I'm now forced to come up with the right width and height based on browser kind. Way to send us back to the stone age.

Ethan Feldman

JW Player Support Agent  
0 rated :

There are several other methods of doing this, FitVids is just one of them.

http://webdesignerwall.com/tutorials/css-elastic-videos

I’ve used this technique with the JW Player, it works perfectly.

Also, this will be much easier in V6.

JW Player

User  
0 rated :

"Also, this will be much easier in V6" -- What is that exactly? Was there something added, changed, modified?

Ethan Feldman

JW Player Support Agent  
0 rated :

We are going to release an update to our WP plugin which will actually support responsive design (in v6). It is not out yet though.

This question has received the maximum number of answers.