Auto rescale of playlist player to adjust to browser dimensions?

Posted: Thu, 2011-10-13 15:04 Ethan LongTail

Reply

You can do this with - http://fitvidsjs.com/

The same file that comes with the plugin has a JW Player install on the bottom of the page.

Posted: Fri, 2011-10-14 02:23 jeff

Reply

very interesting -
i have a followup question:

It seems that fitvids
uses <iframe> and <embed> to accomplish the autoscaling

this is the code from their sample page
<div class="vendor"> <iframe width="520px" height="391px" src="http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed" frameborder="0" allowfullscreen></iframe> </div>

now, where im stuck; how to 'call' my playlist,
do i need to drop the code format of the jwembedder?
(container, flashvars, etc.)
it seems i dont quite get some fundamental thing about how the playlist,
should properly be inserted into html.

Do i need to convert the playlist into a
SWFObject 1.5
http://www.longtailvideo.com/support/jw-player/13/embedding-flash?

my udpated file - using fitvids as a template here
http://fakeshop.com/testFITVIDS.html

thx, and extremely appreciate the response and FITVIDS link
JWplayer is awesome

Posted: Fri, 2011-10-14 13:35 Ethan LongTail

Reply

What you need to do is set up the player on a page like normal, then reference that frame in the iframe, that should work.

Posted: Sat, 2011-10-15 02:02 jeff

Reply

puzzle solved:

"http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/22548/jw-player-ifr..."

thx ethan and the jw social network

Posted: Sun, 2011-10-16 23:55 Ethan LongTail

Reply

Np

Posted: Sat, 2011-11-05 13:19 Chris

Reply

Here's the method I use.. works in all browsers tested (firefox, chrome, safari, opera and internet exploder).. as well as mobile devices tested.. ipod touch, iphone 4, ipad 2, and android sdk simulator

first we create a script to get the viewport size (vieable size within the browser):

 var viewportwidth; var viewportheight; var pwidth; var pheight;
 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') { viewportwidth = window.innerWidth, viewportheight = window.innerHeight }
 // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
 { viewportwidth = document.documentElement.clientWidth, viewportheight = document.documentElement.clientHeight }
 // older versions of IE
 else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth, viewportheight = document.getElementsByTagName('body')[0].clientHeight }
 if (viewportwidth >= 1280) { pwidth = 1280; pheight = 720; }
 else if (viewportwidth >= 720 && viewportwidth <= 1279) { pwidth = 720; pheight = 408; }
 else if (viewportwidth >= 480 && viewportwidth <= 719) { pwidth = 480; pheight = 272; }
 else { pwidth = 320; pheight = 184; }

Save this file as viewport.js or w/e and be sure to include it in

and then our player looks like so:

<div id='mediaspace'>This text will be replaced</div>
<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'file': 'http://content.longtailvideo.com/videos/flvplayer.flv',
    'controlbar': 'bottom',
    'width': pwidth,
    'height': pheight
  });
</script>

This will automatically resize the player to the specified values in viewport.js. Feel free to toy around with the dimensions in viewport.js and tweak to your needs.. I pretty much just did standard video sizes..

Posted: Sat, 2011-11-05 18:54 Willie Meier

Reply

@Chris

I'd like to see this in action.

rotfl, internet exploder heard this once from Ethan..I like that description

Posted: Sun, 2011-11-06 21:10 Ethan LongTail

Reply

@Chris - Thanks for posting that. I would be interested as well :)

Posted: Mon, 2012-01-09 15:16 Roger

Reply

I know this may not be considered strictly to be a JWP problem, but can I resurrect this discussion ?

Over the last few days I have been trying to use JWPlayer on my site with the Fitvids for WordPress plugin (http://wordpress.org/extend/plugins/fitvids-for-WordPress/).

Before discovering the WP plug-in, I looked at the fitvids stuff referred to above (and elsewhere on this forum) - I found it hard to understand the use of the custom selector for the JWPlayer example.

I then found the plugin but have not been able to get it to work with JWPlayer. It seems to work perfectly with a YouTube embed. (What's more, this only seems to work on the 2011 theme, not the theme I really want to use: Weaver II). Examples here: http://tinyurl.com/7dxgoau.

Is there a proven way of getting the kind of response with JWPlayer that I seem to get from YouTube ? With fitvids or something else ?

I should say that I am not so hot on either JavaScript or CSS, knowing just enough to be dangerous so it's quite possible that I may have overlooked something simple.

Posted: Mon, 2012-01-09 15:18 Ethan LongTail

Reply

FitVids comes with a demo of the JW Player. See the bottom sample in their readme...it is a JW Player.

Posted: Mon, 2012-01-09 16:30 Roger

Reply

Hi Ethan - thanks for responding.

If you mean the last example in tests.html, then that was what I was referring to when I said

"I found it hard to understand the use of the custom selector for the JWPlayer example.

.

Aside from how to get Wordpress to play nice, I have been trying to substitue my player for the one in the example.

So taking the fitvids example file (tests.html), I removed everything except the last call, the one for JWP and got what you see at http://tinyurl.com/6qt6qkj. All good.

Now I want to substitute my own iframe - http://tinyurl.com/6s54v7j ... and everything goes wrong.

Plus, in the call to fitvids, I also changed the "extra" lines that were originally in tests.html to point to my domain, for the "custom selector" ...

<script>
        // Basic FitVids Test
        $(".container").fitVids();
        // Custom selector and No-Double-Wrapping Prevention Test
        $(".container").fitVids({ customSelector: "iframe[src^='http://mydomain.com']"});  
      </script>

Why does JWPlayer need this ? Should there be a double call like this ?

Sorry if these are dumb questions but like I said, my CSS & JavaScript are not too hot. If I can get this working, I can look at ways of getting it in to WP.

Thanks,

R.

Posted: Mon, 2012-01-09 16:35 Ethan LongTail

Reply

I can't view any of these pages, because it requires a username / password...

Posted: Mon, 2012-01-09 16:37 Roger

Reply

I should add that what I am aiming for is the effect you get when you view my "biz" site, http://italicmarketing.com. This uses another video player (ahem !) but if you view this on a mobile device, the way that videos get framed within the page is awesome - it does switch to WPTouch Pro for mobile devices, so maybe that has something to do with this.

R.

Posted: Mon, 2012-01-09 16:38 Roger

Reply

Ah sorry about the password - removed now, please try again.

Posted: Mon, 2012-01-09 17:27 Ethan LongTail

Reply

You need to check out how - http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed is embedded.

It is taking up 100% by 100%

Posted: Mon, 2012-01-09 18:26 Roger

Reply

I can see that making it full size in the iframe would probably do the trick ... as to how that link does this, it seems to define a JS function to work out widths. Not my forte but I will take a look ...

Posted: Mon, 2012-01-09 18:44 Ethan LongTail

Reply

Yes, that is how you would do that. You can also try to make the width and height equal to 100% each.

Posted: Mon, 2012-01-09 19:35 Roger

Reply

Yes, that's just what I was thinking ! I have now changed the embedded player in my iframe to do just that (width: '100%', height: '100%',) and it works although as I write this, I may have to change the sizing slightly: I still have scroll bars for some reason.

Thanks for your help Ethan. I will now look in to getting this into Wordpress.

For anybody else interested in this topic, I have also found this page, which shows a way similar to the fitvids approach: http://webdesignerwall.com/tutorials/css-elastic-videos

R.

Posted: Tue, 2012-01-10 13:59 Ethan LongTail

Reply

Np!

Posted: Wed, 2012-01-18 07:56 Roger

Reply

OK, in spite of all the discussions here about using Fitvids, for my current JWPlayer-based project, I have been unable to emulate the smoothness of resizing that I get on one of my other web sites from a combination of VideoJS & WpTouch pro ... until I came across this page: http://www.hexagonwebworks.com/2011/making-videos-responsive/

Basically, I have taken the CSS there and substituted the container name of "mediaplayer" for the VideoJS container name used on that page. Nothing that I do on any of the mobile devices available to me seems to break the frame of the page :-) But something is out of whack with the JWPlayer ...

The poster image is out of whack and the right-hand end of the control bar just fades away in to the right-hand border I seem to have acquired.

For the former, I tried adding img to the CSS from that page, but it doesn't seem to make a difference.

As noted before, I know enough CSS & JavaScript to be dangerous, so can anybody point to the error of my ways ? The page is here: http://tinyurl.com/7gl6c2k.

Thanks,

R.

Posted: Mon, 2012-01-23 10:07 Roger

Reply

The unsightly anomalies with the control bar & additional border seem to have been solved by upgrading the Wordpress theme that this page was running on.

R.

Posted: Thu, 2012-01-26 13:06 Ethan LongTail

Reply

Great! :)

Posted: Mon, 2012-02-06 12:59 Ben

Reply

Scaling with pure CSS breaks video playback on iPhone4.
A very smart way for fluid video display:
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

Unfortunately this method doesn't seem to work with jwplayer, any clues?
I don't want to rely on JS for rescaling...

Posted: Mon, 2012-02-06 13:32 Ethan LongTail

Reply

Do you have a link to where you tried this with the JW Player?

I would really just use - http://fitvidsjs.com/, it works whenever I've tried it with the JW Player.

Posted: Mon, 2012-02-06 18:31 Roger

Reply

Ben, as far as I understand, the page you cite is basically doing the same sort of things as the one that I referenced earlier (http://www.hexagonwebworks.com/2011/making-videos-responsive/), which gave me my best solution so far. As far as I remember, it was OK with iOS devices. (Since I wrote that page, it has been updated so that may be worth another look.) If by saying you don't want to use JS you are referring to the SWObject stuff on this page, I agree !

Sidebar: Personally, I am not keen on the fitvids/iFrame approach, but whether you use that or call the player directly, my research suggests to me that whatever the container that you put the player in to, the player must fill it completely. I have been using width: 100%, height: 100% to do this and it seems to work on everything EXCEPT IE 8. (I still haven't had an answer to my thread detailing that (http://www.longtailvideo.com/support/forums/addons/working-with-modules/24635/responsive-video-inter...) so if anybody can help on that, I'd be grateful.)

But my point here is this: Ben thanks for reminding me about the alistapart reference ... it seems to be saying some IE-specific things, so I'll look at it more closely to see if it helps with my IE issues.

Anyway, back to the plot ... my page (http://tinyurl.com/7gl6c2k) seems to work on my iPod Touch and I do seem to remember trying it on somebody's iPhone4 with no problems so you may want to compare and contrast. Ethan's the expert, but if you post a link, I'd be interested to see what's going on too.

All the best,

R.

Posted: Mon, 2012-02-06 18:39 Ethan LongTail

Reply

Nice Implementation :)

Posted: Tue, 2012-02-07 06:47 Ben

Reply

Thanks for fast reply.
Cannot give you link, it's a closed projecz for a client.
I'll give myself some time to compare Rogers implementation to mine and see if i cann root out the error.
I'll post back when i have some results, thanks!

Posted: Tue, 2012-02-07 13:48 Ethan LongTail

Reply

Np, please let me know.

Posted: Tue, 2012-02-07 18:36 Denny

Reply

Hi Ethan et al-

I've been following along with your discussion here as I've been trying to get my JW Player to play nice with FitVidsJS too. I think I'm very close, but it's still not working. Can anyone tell me where I went wrong with my example?: http://mbhstest.com/007/fitvids.htm

I don't have much experience in dealing with iframes.

Thanks in advance!
Denny

Posted: Tue, 2012-02-07 19:53 Ethan LongTail

Reply

If you download fitvids, there is a demo link at the bottom of the readme that has this working with a JW Player.

Posted: Tue, 2012-02-07 20:04 Denny

Reply

Ethan- I have been working from the FitVids download "tests.html" file. But I'm still not able to get it functioning correctly. The FitVids download example doesn't contain a JW Embedder code. Tt's my guess that I am having an issue with the "src" in my iframe tag here: http://mbhstest.com/007/fitvids.htm. Do you see an error that I've made?

Thanks again!
Denny

Posted: Wed, 2012-02-08 04:01 Ben

Reply

Okay, got it:
Recent version of JWPlayer, Page-Template based on HTML5 Boilerplate.
HTML/Setup:

<script src="fileadmin/templates/pkg/jwplayer/jwplayer.js" type="text/javascript"></script>
<div class="intrinsicRatio ratio16to9">
	<video id="jwplayer" controls="controls" preload="none" width="100%" height="100%" poster="/fileadmin/templates/pkg/jwplayer/echo-hereweare.jpg">
		<source src="/fileadmin/templates/pkg/jwplayer/echo-hereweare.mp4" type="video/mp4"/>
		<source src="/fileadmin/templates/pkg/jwplayer/echo-hereweare.ogv" type="video/ogg"/>	
		<source src="/fileadmin/templates/pkg/jwplayer/echo-hereweare.webm" type="video/webm"/>
	</video>
</div>
<p class="caption">Caption</p>
<script type="text/javascript">
	jwplayer('jwplayer').setup({
		'skin': '/fileadmin/templates/pkg/jwplayer/skins/glow/glow.zip',
		'width': '100%',
		'height': '100%',
		'modes': [
			{type: 'flash', src: '/fileadmin/templates/pkg/jwplayer/player.swf'},
			{type: 'html5'},
			{type: 'download'}
		]
	});
</script>

CSS:

.intrinsicRatio {
	position:relative;
	height:0;
}
.ratio16to9 {
	padding-bottom:56.25%;
}
.intrinsicRatio div,
.intrinsicRatio object,
.intrinsicRatio embed {
	position:absolute !important;
	/* Everything following breaks iPhone and iPad(!) */
	/*
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:teal;	
	*/
}

Works in all good and recent browsers. IE9 too. IE7-8 as good as they can. IE6: I don't care.

Best regards, thanks for replies!

Posted: Wed, 2012-02-08 04:03 Ben

Reply

And of course works on iPhone(4) and iPad!
That was the whole point of it, right? :-)

Posted: Wed, 2012-02-08 13:36 Ethan LongTail

Reply

@Ben - Glad you got it, thanks for Sharing! :)

@Denny - Their example doesn't have JW Embedder code, but it is just an iFrame - you can use JW Embedder code of your own inside of the iFrame.

Posted: Thu, 2012-02-09 09:37 Gwendal

Reply

I don't understand the intrinsic ratio thing postesd by Ben : the height parameter of .intrinsicratio made my video div really 0px height, so I can't see the player (but the player is just hidden). I don't get how to have a fluid player VISIBLE.

Here is my code. for info, my jwplayer integration is inside a 'while' php loop. It works well with non fluid design.

CSS

.intrinsicRatio {
position:relative;
overflow:visible;
height:0;
}
.ratio16to9 {
padding-bottom:56.25%;
}
.intrinsicRatio div,
.intrinsicRatio object,
.intrinsicRatio embed {
position:absolute !important;
/* Everything following breaks iPhone and iPad(!) */
/*
top:0;
left:0;
width:100%;
height:100%;
background:teal;
*/
}

HTML page

<script src="jwplayer/jwplayer.js" type="text/javascript"></script>
			<div class="intrinsicRatio ratio16to9">
			<video id="jwplayer" controls="controls" preload="none" width="100%" height="100%">
				<source src="videos/<?php echo $FILE; ?>" type="video/mp4"/>
			</video>
			</div>
				<p class="caption">Caption</p>
			<script type="text/javascript">
				jwplayer('jwplayer').setup({
					'skin': '/jwplayer/skins/bekle/bekle.zip',
					'width': '100%',
					'height': '100%',
					'modes': [
						{type: 'flash', src: '/jwplayer/player.swf'},
						{type: 'html5'},
						{type: 'download'}
						]
				});
			</script>
	

Posted: Thu, 2012-02-09 09:53 Gwendal

Reply

Hmm well, please forget all this, I was so tired this night when i coded mypage that I didn't correctly link my CSS sheet... everything is fine now, great css !

Posted: Thu, 2012-02-09 15:11 Ethan LongTail

Reply

Great!

Posted: Thu, 2012-02-09 18:57 Denny

Reply

Thanks so much for all of the help here guys! Ben- I was able to use your code to get my issue working too. I have a "fluid" JW Player with the Flow playlist plugin working (in Chrome, Firefox, Safari, AND IE 7&8) now thanks to your code above. Here's the link: http://mbhstest.com/007/physician-page-jwplayer.htm

Thanks again and the Guinness is on me!

Posted: Thu, 2012-02-09 19:12 Ethan LongTail

Reply

Awesome :)

Posted: Mon, 2012-04-02 10:07 Ethan H

Reply

This is almost the solution for me. My client is using m3u8 streams too. The code above works great except once I put the m3u8 file in there I get the "Task Queue failed..." error. But if I comment out the m3u8 line it works beautifully. Any recommended solutions?

<div class="intrinsicRatio ratio16to9">
<video id="jwplayer" controls="controls" preload="none" width="100%" height="100%">
<source src="<?php echo $m3u8_url; ?>" type="application/x-mpegURL"/>
<source src="<?php echo $video_url; ?>" type="video/mp4"/>
</video>
</div>
<p class="caption">Caption</p>
<script type="text/javascript">
jwplayer('jwplayer').setup({
'skin': '<?php echo $blog_url; ?>/longtail/glow/glow.zip',
'width': '100%',
'height': '100%',
'author': '<?php echo $post_title; ?>',
'description': '<?php echo $post_excerpt; ?>',
'image': '<?php echo $image_url; ?>',
'plugins': {
'captions-2': {
'state': false,
'back': true,
'file': '<?php echo $srt_url; ?>'
}
},
'modes': [
{type: 'flash', src: '/wp-content/themes/tfh/longtail/player.swf'},
{type: 'html5'},
{type: 'download'}
]
});
</script>

Posted: Mon, 2012-04-02 10:08 Ethan H

Reply

Sorry I should have added the code lines

This is almost the solution for me. My client is using m3u8 streams too. The code above works great except once I put the m3u8 file in there I get the "Task Queue failed..." error. But if I comment out the m3u8 line it works beautifully. Any recommended solutions?

<div class="intrinsicRatio ratio16to9">
<video id="jwplayer" controls="controls" preload="none" width="100%" height="100%">
<source src="<?php echo $m3u8_url; ?>" type="application/x-mpegURL"/>
<source src="<?php echo $video_url; ?>" type="video/mp4"/>
</video>
</div>
<p class="caption">Caption</p>
<script type="text/javascript">
jwplayer('jwplayer').setup({
'skin': '<?php echo $blog_url; ?>/longtail/glow/glow.zip',
'width': '100%',
'height': '100%',
'author': '<?php echo $post_title; ?>',
'description': '<?php echo $post_excerpt; ?>',
'image': '<?php echo $image_url; ?>',
'plugins': {
'captions-2': {
'state': false,
'back': true,
'file': '<?php echo $srt_url; ?>'
}
},
'modes': [
{type: 'flash', src: '/wp-content/themes/tfh/longtail/player.swf'},
{type: 'html5'},
{type: 'download'}
]
});
</script>

Posted: Mon, 2012-04-02 12:12 Ethan LongTail

Reply

Do you have a link?

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company