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
