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

Autosizing jwplayer into a DIV 100%, then going responsive

Hi there

I am trying to setup jwplayer in a div that goes responsive using the 100% values for height and width. I've used setup from sources found elsewhere in these forums and fiddled with all sorts of css so far, no luck.

I'm not interested in the fitvids or frames solution as my site needs the player to be dynamically generated depending on the page (php pulls values for file, image, captions, playlists etc depending on what you're viewing) which is why I've now tried to go back to basics and get the basic player working with 100% values.

Trouble is that trying to set jwplayer up by itself -- any percent values for height break the player. width = "100%" works fine, and height with a specific value obviously, but breaks as soon as you try any percent value.

Any ideas?

temp link with width = "100%", and a hard coded height (otherwise the player doesnt work): http://tinyurl.com/8znpaf6

29 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
-1 rated :

Your example seems to work.

Here is an example that uses both 100% for width and height – http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/hundredpercent.html

Up Down

JW Player

User  
-4 rated :

Hey there.

Yes, I've used example from the developer.longtail page and read through some other things from here: http://www.longtailvideo.com/support/forums/jw-player/using-playlists/22892/auto-rescale-of-playlist-player-to-adjust-to-browser-dimensions#comment-138270

As I say though, at basic starting point, height:"100%" breaks the player at http://tinyurl.com/8znpaf6 .. Did you check the source? And what browser are you using? I can't get it going in Firefox 14.0.1 or Chrome 21.0.1180.83 or Opera 12.01 or IE ..

Any ideas?

Thanks

Up Down

Ethan Feldman

JW Player Support Agent  
-5 rated :

I was using FF14, but that was not using % of the height.

If you really want to get % based height to work, it requires some additional CSS.

Example code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>
			100% Height / Width
		</title>
        <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js">
		</script>
		<style type="text/css">
		html,body { height:100%; width:100%; padding:0; margin:0; }
		#player {
		height:100%;
		width:100%; padding:0; margin:-3px;}
		</style>
    </head>
    <body>
    <div id="player">
	</div>
        <script type="text/javascript">
            jwplayer("player").setup({
            	file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4",
            	image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
      			height: "100%",
      			width: "100%",
				stretching: "exactfit",
				flashplayer:"http://player.longtailvideo.com/player.swf"
            });
        </script>
    </body>
</html>

Up Down

JW Player

User  
-2 rated :

no luck here...

doing exactly as above... FF 14.0.1 here..

If I hardcode the height in the setup config, i see the player.. if not, I just don't see it.

Up Down

JW Player

User  
-2 rated :

@Lyne, yes that's the same prob I'm having.

@Ethan thanks for the example. I can get that running by itself fine, but the player breaks when put into my site at http://tinyurl.com/8znpaf6 which is the prob I'm having. Width=100% works fine, just any percentage for height breaks the player. Must be a prob with css?

I've also noticed that Ethan's example breaks when the <div id="player"> is nested inside another DIV (which is the situation on my theme, ie: player disappears when in more than 1 DIV.. maybe this is the issue to overcome?

Example DIV setup that deals with player in my theme

bc.. <div id="screen">
<div class="video-wrap">
<div id="player">
<script type="text/javascript">
jwplayer("player").setup({
file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4",
image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
height: "100%",
width: "100%",
stretching: "exactfit",
flashplayer:"http://player.longtailvideo.com/player.swf"
});
</script>
</div>
</div>
</div>


The 'screen' div sets the responsive size for the player and shows loading gif, then 'video-wrap' should fill the space to 100% of 'screen' and player sits in 'player' div and fills 100% ???

CSS for elements:

bc.. .video-wrap {
position:relative!important;
padding-bottom:56.25%!important;
height:0!important;
overflow:hidden!important;
background:#333;
}
#player {
height:100%;
width:100%; padding:0; margin:0px;}

#screen {
color:#FFF;
margin:0 0 20px;
position:relative;
overflow: hidden;
z-index:4;
background: green url(images/loading-bert.gif) no-repeat center center;
}



Any help with getting this working is appreciated, I've been banging my head for days on this! Thanks

Up Down

JW Player

User  
0 rated :

How to get jwplayer working nested in more than 1 div?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Lyne – Can I see?

@jwNoob – It is possible to double nest divs when using the player. I created an example that uses CSS3 and double nested divs, and jQuery. If you want to see it please contact us – http://www.longtailvideo.com/support/contact-us, it does not use % based width/height, though.

Up Down

JW Player

User  
0 rated :

Ok, have done, thanks for that. Looking forward to getting this going! Cheers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

Up Down

JW Player

User  
0 rated :

@Ethan : not much to see, I just used iframe to make it work.. I am using the bootstrap of twitter hub in my layout. I saw that to make the player "appear" correctly, I need to put a "height:100%" into all of the nested parent containers up to the "html" tag, which destroy the layout and make the video to "stretch" in height.

The only way I found, is your iframe example, into which I could put html body and the video container into 100% height, like your example above.. BUT ..

the flag : stretching "exactfit" specified wouldn't work in IE9. Everywhere else it was fine. The behavior in IE9 with the stretching option was making the iframe "page" to not "stretch" the video to the size of it's parent iframe ...

Anyway, now, as I said with the example above + some css tweaks of mine, put into an iframe, without stretching option, makes everything works flawlessly, in IE7-8-9, Chrome and FF 14.

Iframe container page :

bc.. <style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
/*padding-top: 30px; fix for IE .. */
height: 100%;
overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="embed-container">
<iframe src="/assets/videos/homevideo.html" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>



And into the homevideo.html page :
bc.. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
html, body
{
height: 100% !important;
width: 100% !important;
overflow:hidden;
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript" src="/assets/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id="mediaplayer">JW Player goes here</div>
<script type="text/javascript">
var options = {
modes: [
{ type: 'html5' },
{ type: 'flash', src: '/assets/jwplayer/player.swf' }
],
levels: [
{ file: '/assets/videos/jessica_withsound2.mp4' },
{ file: '/assets/videos/App-Service-Product_Promo_preview_video.flv' }
],
image: "/assets/videos/App-Service-Product_Promo_preview_image_V2.jpg",
screencolor: "#FFFFFF",
skin: '/assets/jwplayer/modieus/modieus.zip',
/*stretching: "exactfit",*/
height: "100%",
width: "100%"
};
jwplayer("mediaplayer").setup(options);
</script>
</body>
</html>




Hoping it can help some of you !

Up Down

JW Player

User  
-1 rated :

Oops I forgot to mention ..

Look at the style in iframe page : .embed-container .... the padding-bottom value there is related to the height ratio of your video.

bc.. padding-bottom: 56.25% ;




Example : my video is 960 x 540 ... so by doing "540 divided by 960" will give you the height ratio of your video : 0.5625 = 56.25%

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks, that is helpful…can I see where this being run, though?

Up Down

JW Player

User  
0 rated :

I am having the same issue and it seems like the most important question isn't being answered. How do we get it to work with 100% width and 100% height within nested divs without using an iframe?

Up Down

JW Player

User  
0 rated :

In fact the example you provided only works if every element around it has 100% width and height set. Even just adding an empty div with no styles attached causes the height to default to 0. Guessing this is a bug you guys are looking into, any idea when we will see a fix?

Up Down

JW Player

User  
0 rated :

Ethan, I sent you an email via the contact form :)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks Lyne :)

@David – this works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>
			100% Height / Width
		</title>
        <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js">
		</script>
		<style type="text/css">
		html,body { height:100%; width:100%; padding:0; margin:0; }
		#player {
		height:100%;
		width:100%; padding:0; margin:-3px;}
		</style>
    </head>
    <body>
    <div id="player">
	</div>
        <script type="text/javascript">
            jwplayer("player").setup({
            	file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4",
            	image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
      			height: "100%",
      			width: "100%",
				stretching: "exactfit",
				flashplayer:"http://player.longtailvideo.com/player.swf"
            });
        </script>
    </body>
</html>

Up Down

JW Player

User  
0 rated :

Unfortunately it doesn't. As soon as you wrap another div around the <div id="player"> it will stop working.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have an example of that?

Up Down

JW Player

User  
0 rated :

bc.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
100% Height / Width
</title>
<script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js">
</script>
<style type="text/css">
html,body { height:100%; width:100%; padding:0; margin:0; }
#player {
height:100%;
width:100%; padding:0; margin:-3px;}
</style>
</head>
<body>
<div><div id="player">
</div></div>
<script type="text/javascript">
jwplayer("player").setup({
file: "http://content.bitsontherun.com/videos/gSzpo2wh-486405.mp4",
image: "http://content.bitsontherun.com/thumbs/gSzpo2wh-480.jpg",
height: "100%",
width: "100%",
stretching: "exactfit",
flashplayer:"http://player.longtailvideo.com/player.swf"
});
</script>
</body>
</html>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

If you are going to be double nesting divs, you should also apply the CSS styling to the outer div, as well.

Up Down

JW Player

User  
0 rated :

That's where the problem comes in, its very rare you will be able to apply 100% width and height to every div that surrounds it, in my case that is definitely not an option.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You could always try it? Does it work if you do?

Up Down

JW Player

User  
0 rated :

I am also having the same problems.

Im working on a responsive design where I want a video to fill half of the screen width and adjust the height accordingly. The containing div for the video is 50% width of the viewport with the video width & height 100%.

The result is in Chrome the video fills the div width (yay!) and height (boo!) in Firefox displays no video and IE only half of the height of the video. fail!

Here's a link:
http://cps.deadline.net.au/test/

I'd love some help :)

Thanks!
Melissa


Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I would recommend using this technique for doing this – http://webdesignerwall.com/tutorials/css-elastic-videos

I was able to use the player with the CSS techniques here and it works fine.

Up Down

JW Player

User  
0 rated :

Thanks Ethan for your feedback.

I have tried implementing the css as suggested, but now the video does not display at all in any browser.

Do I now need to use an iframe?

Thanks!

Up Down

JW Player

User  
0 rated :

Got it working Ethan!

I ended up over riding the video wrapper canned styles with CSS:

#mediaspace2_wrapper{
position: absolute !important;
top: 0 !important;
left: 0!important;
width: 100%!important;
height: 100%!important;
}

Thanks for your help.

Melissa

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np! Glad you got it!

Up Down

JW Player

User  
0 rated :

This solution of course breaks several other CSS things though, such as subtitle display locations, etc. It would seem that a lot of positioning code in JWPlayer is reliant on a height and width being set, instead of breaking that logic out to deal with percentage based values.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

We support % based values as well, though.

This question has received the maximum number of answers.