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

Responsive Video, Internet Explorer, 100% width/height

OK, for some time I have been experimenting with responsive video using JWPlayer in a Wordpress setting (using a plugin to allow direct coding of HTML) and I am very close to getting what I want. I have experimented with Fitvids (http://fitvidsjs.com/) but I prefer a non-iframe manual implementation of the same kind of approach outlined in several places on the web. Specifically, I have used & modified code from http://www.hexagonwebworks.com/2011/making-videos-responsive/ & http://webdesignerwall.com/tutorials/css-elastic-videos (based on code from http://www.tjkdesign.com/articles/how-to-resize-videos-on-the-fly.asp). Thanks to all of those.

Basically, these define a flexible "wrapper" which contains a max width/height player. This seems to work with most of the important browsers, with the exception of Internet Explorer 8 - I haven't looked at it for IE9 but assume that if I get it right for IE8, the rest should fall in to place !

If I specify bc.. width: 100%, height:100%,
... in IE I just get a gap where the player should be - not the text between the DIVs for the media player, just a big hole, so it's obviously trying to put something out there.

The browser has the latest Flash upgrades and is running on Windows 7 pro. My code tries to get the browser to use HTML5 & provides mp4 & webm files, but for IE8, it should fall back to Flash. If I code a specific width, the gap is filled, but that ruins the responsiveness :-(

Here's a demo of 100%: http://tinyurl.com/78qjxxo
This is of a hard-coded 480x270: http://tinyurl.com/8a5n88m

So my questions are these:
1. Am I missing something in terms of telling Flash to use 100% of what contains it if it is invoked ?
2. If not, why does *width: 100%, height:100%* throw things ? Is there another way of doing this ?

I am probably missing something simple, so what is it ?

I don't want to get in to SWObject, etc. But although IE is less important than it was, it's still _very_ ! So if anybody has any suggestions, I'd be happy to hear them.

Thanks,

R.

20 Community Answers

Up Down

JW Player

User  
0 rated :

Just checked in 5.9: the same.

@Ethan & all you LT guys ... any thoughts on this please ?

Thanks,

R.

Up Down

JW Player

User  
0 rated :

Hi Roger,

Did you check http://www.longtailvideo.com/support/forums/jw-player/using-playlists/22892/auto-rescale-of-playlist-player-to-adjust-to-browser-dimensions#comment-138270

IE8 works for me in the given setup. Probably the order of the jwplayer-"modes" that is causing this?

Up Down

JW Player

User  
0 rated :

Hi Ben - yeah, I saw that and it looks like a nice piece of code, but I haven't had the chance to try it yet. I'll update this when I do.

I want HTML5 to be the first option. Does hyours go to Flash first (as per your Mode statements), even though you specify a VIDEO tag ?

Anyway, more when I get a chance to try your approach.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You can use modes to make HTML5 first – http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/18508/jw-embedder-modes

Up Down

JW Player

User  
0 rated :

@Roger
Yes, for everything except iOS devices...
Normally i'd also go HTML5 first, but a specific Android tablet (namely Toshiba AT 100, which a client wants to use at a show) is horribly failing at HTML5 Video playback so i decided to switch... :-(

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

What OS does this tablet run? How is it failing?

Up Down

JW Player

User  
0 rated :

Sorry for late,

It's an "optimized" Android 3.1 Honeycomb.
3 of 10 times it crashes, so at least the browser needs to be restarted. Sometimes even the whole tablet.
Regardless if using mediaelements.js, videojs or jwplayer...
Just isn't reliable..

Up Down

JW Player

User  
0 rated :

Hi Ben - "optimized" ? Hmmm .... by whom and how ?

And it's definitely crashing on the HTML5 replay, right, not Flash ?

R.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yeah. that does that mean?

And this is a general Android 3.1 issue it seems , not specific to the JW Player.

Up Down

JW Player

User  
0 rated :

It's been a while since anyone has posted but has anyone figured out the IE issues?
(and is this the best approach to get a 'responsive JWplayer in WP'?

Hmmm, I wonder if setting the 'max' width & height in the css would help in this IE issue?

I suppose one could write some sort of 'if/then' statement that checks if the users browser is IE then uses a set pix for width/height...

Hope fully some ace can post demo script for this... I'd do it but I'm not a top js script ace.
cheers
R

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

FitVids has a plugin for WP, worth checking out.

Up Down

JW Player

User  
0 rated :

Thanks for the quick reply Ethan!

I got everything to work BUT now the question is,
since your JW100%.html file uses html5 video and not .swf to work with adaptive fitvids
what's the advantage to use the JWplayer rather then simply html5 video with fitvids?

My original reason to use the JWplayer with fitvids was so I didn't have to make a ton of .ogv's just for FF...
and also I suppose if one wants to use their OWN videos using 'fitvids' then the JWplayer is a solution
(rather then using fitvids other usual formats such as Youtube, Vimeo, etc.)... ?
Are there other advantages as well?

==========
Further questions:
Is the JWplayer going to be updated to support adaptive sizing in the near future?
And is the MAIN reason (besides all the extras) to continue to use the JWplayer rather than html5 video so that h.264 videos will play on FF via the flash player?

Thanks for your time!
R

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@rand – Our player uses SWF too…not just HTML5.

Yes, we are going to support this fully in V6, I believe.

Up Down

JW Player

User  
0 rated :

Ooops.. FORGET THE LAST POST!

Now I'm understanding better what's going on...
it seems that using the JWplayer is the ONLY way to play ones own videos with fitvids (rather then using Youtube, Vimeo, etc with it). BUT is there a reason that your JW100%.html solution has to use html5 video with fitvids AND can't drop back to using Flash for FF, etc?

===========
I'm still curious about my 'Further questions'..
Is the JWplayer going to be updated to support adaptive sizing somehow so we won't have to use fitvids in the future?

And is the MAIN reason to continue to use the JWplayer (besides all the extras) rather than html5 video so that h.264 videos will play on FF via the flash player?

Thanks for your time!
R

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@rand…now you are just confusing me more. Out player drops back to Flash for FF just fine.

Please look at http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/single_mp4.html in Firefox.

It falls back to Flash.

We did not make FitVids, it isn’t our solution. It is just a plugin that exists for responsive videos that happens to work with our player, that’s all.

Oh and I already answered your questions above.

You should probably take the time to read through – http://www.longtailvideo.com/html5/

Up Down

JW Player

User  
0 rated :

Jeez Ethan... you posted before my 2nd post - you're fast!

So you said, "Our player uses SWF too...not just HTML5."
yes I know but when I tested fitvids using your 'http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/hundredpercent.html' file in FF it didn't use the flash player...

Is their a different code to use so that it uses the html5 player but uses the Flash player for FF and any other app or device that needs it so we don't have to make a bunch of .ogv's?

THANKS!
R

Up Down

JW Player

User  
0 rated :

Here's the script inside the JW100%.html... which is html5 only... no?

<script type="text/javascript">
jwplayer("player").setup({
players: settings.modes.html5only,
levels: [{
file: "http://www.randwetherwax.com/media/Swirl-bg-amb2.mov"
}, {
file: "http://content.bitsontherun.com/videos/gSzpo2wh-604476.ogv"
}],
image: "http://www.randwetherwax.com/images/swirl-bg2.jpg",
height: "100%",
width: "100%"
});
</script>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Ok, then show me where you tested – http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/hundredpercent.html, using fitvids, would love to see it.

That code is just a demo on our developer site.

This is my code that uses 100% and does both Flash and HTML5:

<!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>



Yep, both Flash and HTML5...

Up Down

JW Player

User  
0 rated :

Ha... sorry for the confusion! I found that JW100%. code from a link one of you guys gave in another discussion about how to use fitvids. I'd love to send you a link to my version using it but I'm developing a (messy) test site and I'd rather not make it public right now. Can I email it to you?

I'll try your above code now.
THANKS!!!!!!!!!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Sure, np! Email us – http://www.longtailvideo.com/support/contact-us

This question has received the maximum number of answers.