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

JW player iframe sizing

Hi,

I have been looking at creating an iframe embed code for our JW player, and I wanted to know the best way to resize the video to fit the frame that it is in. The idea of this being I have one iframe embed code, and I just change the iframe size to create players of different sizes.

Currently we have create separate pages for each player size, but I'm sure there must be a way to get the player to fit the browser window/iframe size automatically.

I have tried setting the width and height flashvars to 100%, but that in FF the page loads blank and in IE the player height fixed and only takes up about a fifth of the page instead of filling.

What is the best way of doing this?

The player doesn't need to resize dynamically with window resize, just fit the page/frame it is in when it loads.

Thanks in advance,

James

29 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

What you can do is set the player width / height to 100%, that way it will always be at whatever size you make the iFrame.

Up Down

JW Player

User  
0 rated :

I have tried setting the height and width to 100% but that doesn't seem to work in all browsers.

In Chrome and Safari, the player loads fine, but in Firefox, the player page and the iframe page both load blank. In IE the player fills the correct width but the height is fixed and does not fill the frame.

I have a test page here:

http://live.3xscreen.com/player/iframeplayer.html

The player itself is at:

http://live.3xscreen.com/player/iframetest.html

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Hmm, you might have to set the width and height as pixels in the player setup, and then use in-line CSS on the div to make it stretch out accordingly.

Up Down

JW Player

User  
0 rated :

I have exactly the same problem. Also it doesn't fill the screen on iPad/iPhone. Actually on the iPad the play button appears centered, and when pressed starts playing the video (you can hear the audio), but the video is not visible. I think on the iPad it is resized to zero size.

Can you elaborate on what you mean by 'use in-line CSS on the div to make it stretch out accordingly'?

Help would be very much appreciated.

Regards,
KJ

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have a link?

Up Down

JW Player

User  
0 rated :

http://live.3xscreen.com/player/iframeplayer.html doesn't fill the screen on my iPad (1)

Up Down

JW Player

User  
0 rated :

How would I go about using inline CSS on the div, and what would I set the size in pixels to?

Up Down

JW Player

User  
0 rated :

@James

I use iframes on my web site

feel free to contact me from off my web site

www.mirana.net

Up Down

JW Player

User  
0 rated :

Hey, I am using JW Player for RTMP stream. I want to embed it in other site but problem is that i need to change stream several times so how can i embed player so that even i change stream, embedded player works fine ?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Danny – I am not really sure what you are asking, but this had nothing to do with that this thread is about.

@Klaas – In your embed code for the player, change:

‘width’: ‘100%’,
‘height’: ‘100%’

To:

‘width’: ‘640’,
‘height’: ‘480’

And change:

<div id='mediaspace'>This text will be replaced</div>

To:

<div id='mediaspace' style='width:100%; height:100%;'>This text will be replaced</div>

@James – My reply to @Klaas has a work around.

Up Down

JW Player

User  
0 rated :

@Ethan - I tried what you recommended, changing the width and height here:

http://live.3xscreen.com/player/iframe_div100.html

This doesn't seem to adjust the player size as required.

Also when i put this link into an iframe, it doesn't fit the player to the frame.

http://live.3xscreen.com/player/iframe_div100_player.html


Looking at Youtube's iframe embed code, it looks like their player sets the width and height values when it loads, based on the dimensions of the window it is in. Once the player loads it is then a fixed size (unlike using 100% for the JW player height and width).

Is there any way of doing something like this with JW player?


Up Down

JW Player

User  
0 rated :

@James

I took a look at your code and found a couple of things
<ol>
<li> the size for the iframe differs to that of the player</li>
<li> 800 x 450 vs 640 x 480 </li>
</ol>

This results in cutting off part of the controlbar as seen from/on your link that you gave.

Question(s):
<ol>
<li> are you trying to size the jplayer to the iframe</li>
<li> are you trying to size the iframe to the player</li>
</ol>

The better route is to have the iframe dynamically re-size to the given size of the player. You could thereby pass the player's dimensions to the iframe or vice versa.

I use a JavaScript function on my web site that does exactly that and positions the player in a location of my choice.

Contact me, if you wish, from off my web site and I'll send you the function to which you have to experiemnt or play with the positioning and sizing.

www.mirana.net

Up Down

JW Player

User  
1 rated :

I've think I solved it.

The goal was to create a single HTML page which fills the page with the player on all browsers/platforms. This HTML file can then be used as iframe src and the size of the player can be set using width/height of the iframe.

The trick is to set the width/height of the player to 100%
bc.. jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '100%',
'height': '100%',
...



But then more importantly to add the following (inline) style in the HTML document:

bc.. <style media="screen" type="text/css">
html, body {
margin:0px;
padding:0px;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>



I also set the body background to black:

bc.. <body style="background-color:#000000">



I have tested on the following browsers and this works in all of them

OSX: Safari, Firefox, Chrome
Windows (using IETester): IE 5.5, 6, 7, 8

iframe: http://audioserver.nl/jwplayer/iframe.html
embedded on: http://audioserver.nl/jwplayer/embed.html

Hope this is helpful for others too.

Up Down

JW Player

User  
1 rated :

@Klaas

Thank you very much for this information! I would never have thought of adding the style to the page.

I have tested this myself and it works perfectly.

This will save me lots of time creating all the different player sizes as individual pages.
A project I was just working on meant I needed to create 5 different sizes of the same player, so I had to create 5 pages. I knew there had to be an easier way.

I think I owe you a beer!

Up Down

JW Player

User  
0 rated :

Happy to be of help. I'll drop you an e-mail when I'm in London :-)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Wow, thank you for this, that is great! :)

Up Down

JW Player

User  
0 rated :

I have to be honest and credit my designer Thomas van der Westen who came up with the original css in an earlier version of our embedded player HTML.

Up Down

JW Player

User  
0 rated :

Hey all,

this is so cool
this thread provides the details for solving the puzzle:
autoscale resizing to fit browser
fullframe/fulbleed of both player and playlists

"http://www.longtailvideo.com/support/forums/jw-player/using-playlists/22892/auto-rescale-of-playlist-player-to-adjust-to-browser-dimensions"

Up Down

JW Player

User  
0 rated :

Here is a function that I had developed several years ago using an iframe and currently being used on my web site.

To use it one would need to make their own relevant changes BUT I am sure one would agree in its simplicity. It works very well on all platforms namely, IE, FF, Opera, Chrome and Safari; I also suspect that it would work very well in the mobile environment BUT cannot provide info as I don't have a mobile.

bc.. <script>
function loadwindow(url,wdth,hdth)
{
document.getElementById("dwindow").style.display='';
document.getElementById("dwindow").style.width=wdth + "px";
document.getElementById("dwindow").style.background="#282828";
document.getElementById("dwindow").style.height="20" + "px";
document.getElementById("dwindow").style.top=(document.documentElement.clientHeight-hdth)/2-40 +"px";
document.getElementById("dwindow").style.left=((screen.width-wdth)/2) + "px";
document.getElementById("cframe").style.border='0px solid #e1e2ff';
document.getElementById("cframe").style.height= hdth + "px";
document.getElementById("cframe").style.width=wdth +"px";
document.getElementById("cframe").style.top=(document.documentElement.clientHeight-hdth)/2-20 +"px";
document.getElementById("cframe").style.left=(screen.width-wdth)/2 + "px";
document.getElementById("cframe").style.position='fixed';
document.getElementById("cframe").style.background='#000';
document.getElementById("cframe").src=url;
}

function closeit()
{
document.getElementById("dwindow").style.display = "none"
document.getElementById("cframe").src = ""
document.getElementById("cframe").style.width = ""
document.getElementById("cframe").style.height = ""
}
document.write('<div id="dwindow" style="position:absolute;font: normal normal bold 12px Verdana;color:#e1e2ff;z-index:100003;display:none;margin-top:4px"> '+ document.title +'<span class="c1" style="float:right;cursor:pointer;margin-top:-2px;color:#e1e2ff;">Close Window ---»»  <img style="float:right;margin-top:-2px" src="images/close.gif" onclick="parent.closeit()" title=" Close displayview " alt="" /></span>');
document.write('<iframe id="cframe" frameborder="0" style="z-index:10000;"></iframe></div>');

</script>



Thus, for example IF I wanted to place xxxx.html with dimensions of 800x400, I would make the following call to the function

onclick="loadwindow('xxxx.html','800','400')"

This will center the iframe with xxxx.html on your page.

Having this function on a page then calling the function it is easily closed by using the parent.close() function call.

This function may be of help for some when embedding.

If anyone needs help/assistance feel free to contact me from off my web site, www.mirana.net

Up Down

JW Player

User  
0 rated :

@Willie: That sure seems overly complicated if that's the embedcode that viewers are required to copy/paste.

The solution provided by Klaas is really the only thing needed to make a clean implementation with support for virtually all platforms.. (I would put html5 before flash for proper detection of the right client on android phones though, but close enough ;))

Up Down

JW Player

User  
0 rated :

no embed code at all.

it is creating an iframe which can be closed from within the iframe.

Up Down

JW Player

User  
0 rated :

After a cup of coffee, I noticed that I failed to mention

The beauty of the function I posted above is that it can be used from with a flash application and therein with a flash app it allows you to play the JWPlayer in a flash app and iframe above the flash.

bc.. javascript:parent.loadwindow('url',800,540)



Thus it(the function) can be used in html(html,xhtml,dhtml,html5) and in flash.

To see this in action visit my 3D video page on my web site.

I do admit that it does require knowledge of JavaScript and DOM

Up Down

JW Player

User  
0 rated :

Thx Klaas, it works great

Up Down

JW Player

User  
0 rated :

@Klaas

YES! I've been trying to fix this problem for months, as even their own demo web page doesn't work correctly when Height is set to 100% with IE in Flash:

(Open in IE, set to "Flash Only" and scroll to the bottom)
http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/heightwidth.html

LongTailVideo should include your iframe.html example in their documentation as the best way to get 100% width/height with their player.

THANKS AGAIN!
~Rob

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I have a demo also that should do this, I believe, here is some sample 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  
0 rated :

Thanks Ethan, that code works as well! I still prefer the solution provided by Klaas however.

Your example created a vertical scrollbar when I tested in IE, which I thought could be mitigated by setting width/height to 95% instead of 100%, but that created a small white line on the right, which I was unable to get rid of. I'm sure I could get rid of it somehow, but I already have a working solution so I'm happy :)

In any case, if either this or preferably Klaas's solution were in the documentation, or on the example page:

http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/

it would have saved me much time. I almost didn't purchase this solution, as your player seemed to be bugged when using Flash on IE. Judging by the number of threads on the subject, I don't think I'm the only one who had trouble. Just some constructive criticism :)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np :)

Up Down

JW Player

User  
0 rated :

Hi.

I have same problem like James. and the player loads in chrome but not in ie and ff.

I think the prob is about cross domain calling. the page is on some other domain and I want to show that page in my site via iframe but can not.

this is the error

There was an error while handling a listener: Error: Permission denied to access property 'href'

function f(){if(a.typeOf(p.playlist)=="array"&&p.playlist.length<2){if(p.playlist.length==0||!p.playlist[0].sources||p.playlist[0].sources.length==0){r();return}}if(h.getStatus()==a.loaderstatus.COMPLETE){for(var w=0;w<p.modes.length;w++){if(p.modes[w].type&&e[p.modes[w].type]){var x=p.modes[w].config,u=a.extend({},x?e.config.addConfig(p,x):p),v=new e[p.modes[w].type](i,p.modes[w],u,h,t);if(v.supportsConfig()){v.addEventListener(c.ERROR,g);v.embed();m(t,u.events);return t}}}if(p.fallback){a.log("No suitable players found and fallback enabled");new e.download(i,p,r)}else{a.log("No suitable players found and fallback disabled");q()}}}

anyone can help?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have a link?

This question has received the maximum number of answers.