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

iPhone: Using CSS to adjust JWP width

Hi Ethan and all,

I am developing a page with 3 JWPs in a row with each set to 360px width in the parameters. This works fine for desktop but the iphone has max 480 (landscape) and 320 (portrait). I have a separate CSS to reduce the screen size for iphone, but can't seem to reduce the width of the JWP to L160 and P100. Is it possible using CSS?

I have tried to set a maximum width of the div containing the JWP, but it maintains it's size and just pushes outside the div.

Failing a CSS solution, do you have any other ideas? I would really like to maintain the 3 videos in a row. I also want to avoid reducing the desktop JWP size down to 320px just to cater for the iphone portrait view.

Thanks!
Rick

58 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I use this tool and it works pretty well – http://fitvidsjs.com/

Up Down

JW Player

User  
0 rated :

Thanks! Exactly what I need!

Unfortunately I can't get the FitVids component to resize the JWP. The code below doesn't resize the video and pushes each video onto a new row.

Any tips?

HTML FITVIDS...
bc.. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$("#video-container").fitVids();
});
</script>



HTML BODY...
bc.. <body>
<div id="container">
<div id="video-container">
<div id="video1">Video 1</div>
<script type="text/javascript">
jwplayer('video1').setup({
'flashplayer': 'player.swf',
'file': '1.mp4',
'image': '1.jpg',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
<div id="video2">Video 2</div>
<script type="text/javascript">
jwplayer('video2').setup({
'flashplayer': 'player.swf',
'file': '2.mp4',
'image': '2.jpg',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
<div id="video3">Video 3</div>
<script type="text/javascript">
jwplayer('video3').setup({
'flashplayer': 'player.swf',
'file': '3.mp4',
'image': '3.jpg',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
</div>
</div>
</body>



CSS...
bc.. body {
margin: 0;
padding: 0;
background-color: #000000;
color: #FFFFFF;
font-size: medium;
}
a { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: x-large; text-align: center; }
#container {
margin: 0 auto;
width: 100%;
height: 100%;
}
#video1 {
float: left;
width: 33%;
}
#video2 {
float: left;
width: 34%;
}
#video3 {
float: left;
width: 33%;
}

Up Down

JW Player

User  
0 rated :

@Rick

You can try using
bc.. <ul style="width:100%">
<li><div id="video1">Video 1</div>
<script type="text/javascript">
jwplayer('video1').setup({
'flashplayer': 'player.swf',
'file': '1.mp4',
'image': '1.jpg',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
</li>
.
.
.
</ul>


not sure IF this will work for you BUT worth a try.

IF you have a link or test page to look at then it will be easier to find a solution

Up Down

JW Player

User  
0 rated :

Ok, forget all that code. It's wrong.

The big question is how to integrate JWP with FitVids. Does it require custom settings?
Looking at my live code in Firebug, it doesn't seem to catch the resizing at all.
bc.. <div id="video1_wrapper" style="position: relative; width: 480px; height: 360px;">
<div class="fluid-width-video-wrapper" style="">


Notice the style is empty?

Up Down

JW Player

User  
0 rated :

Hi Willie,

Thanks for the suggestion but it's not the layout which is the problem. It's more about how FitVids works with the JWP.

I'd show you a sample, but it's for a client's new website and can't be made public at this point in time.

Cheers!
Rick

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Rick – The demo of fitvids, the bottom player is a JW Player, and it works fine. It just uses an iframe and then you specify the frame a custom player in fitvids. The file tests.html has it.

Up Down

JW Player

User  
0 rated :

@ Ethan

I saved test.html to my site and it doesn't work. On all examples below, the container div reduces but the JWP size never changes.

http://www.billarga.com/newsite/test.html (unmodified)
http://www.billarga.com/newsite/test50.html (container @ 50%)
http://www.billarga.com/newsite/test10.html (container @ 10%)
http://www.billarga.com/newsite/test100.html (container @ 100%)

What exactly is FitVids designed to do?

I just need the JWP to resize, depending on the screen size viewing it. I can use CSS to change all other parts of the page, except for the JWP which remains locked at the height and width set in the html.

Your thoughts?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

FitVids is designed to do exactly what you are trying to do

The reason it is not working is because this file is missing – http://www.billarga.com/newsite/jquery.fitvids.js – This is the most important file !

Up Down

JW Player

User  
0 rated :

@Ethan

I found a semi-solution. If the player is set to 100%, the containing div can control the size of the player. Very good. Problem solved for desktop. Seems I missed this part of the documentation.

However, it doesn't resize for iphone. The video just wants to fit the screen, never more, never less. I guess I'll have to live with that and work with it.

http://www.billarga.com/newsite/

Thanks.

Up Down

JW Player

User  
0 rated :

@Ethan

Sorry, missed your post. Your right, I had the wrong path to the JS, sorry. Thanks! Their test page now works. Sorry for my blunder.

Please bare with me while I try to get my head around all this new stuff.

When you wrote "It just uses an iframe and then you specify the frame a custom player in fitvids.", the iframe version is not really the same as my local player, so I'm having trouble interpreting what they've done. They have 3 sizing elements. The video id (which isn't in their html) is set to W:100% H:auto, their iframe is set to W:520 H:391 and the container div is set to W:70%.

What I am not understanding, and hope you can help me with specifics, are *which elements are 100%, which elements are in pixels and which elements determine the size of the player*. No matter what I try with my iphone.css I can not manage to get the player to resize itself and stay within the containing div.

http://www.billarga.com/newsite/

IPHONE.CSS (iphone set to 70% width for testing)
bc.. body {
margin: 0;
padding: 0;
font-size: medium;
}
a { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: x-large; text-align: center; }
#page-wrapper {
margin: 0 auto;
width: 100%;
}
#cssinfo {
color: green;
}
#video-container {
width: 70%;
padding: 5%;
margin:0px auto;
background:#fff;
box-shadow: 0 5px 5px rgba(0,0,0,0.5);
}
#video {
padding: 2%;
background: #d1eed1;
margin-bottom: 2em;
width: 640px;
height: 480px;
}



HTML
bc.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>New Site</title>
<script type="text/javascript" src="http://www.billarga.com/newsite/player/jwplayer.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="http://www.billarga.com/newsite/css/iphone.css">
<link rel="stylesheet" media="all and (min-width: 1824px)" href="http://www.billarga.com/newsite/css/screen.css">
</head>
<body>
<div id="page-wrapper">
<div id="cssinfo">
iphone.css = green<br />
screen.css = red
</div>
<div id="video-container">
<div id="video">Video 1</div>
<script type="text/javascript">
jwplayer('video').setup({
'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
'image': 'http://www.billarga.com/newsite/content/0000001/alexandra.jpg',
'file': 'http://www.billarga.com/newsite/content/0000001/alexandra.mp4',
'controlbar': 'bottom',
'width': '100%',
'height': '100%'
});
</script>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://www.billarga.com/newsite/js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$("#video").fitVids();
});
</script>
</body>
</html>

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Rick – I would recommend putting your player in an iFrame, and then doing it like their demo. I did that and it works fine.

Up Down

JW Player

User  
0 rated :

@Ethan

What's an iframe? How am I supposed to change my code to their code? There's nothing similar between them.

My code...
bc.. <div id="video">Video 1</div>
<script type="text/javascript">
jwplayer('video').setup({
'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
'image': 'http://www.billarga.com/newsite/content/0000001/alexandra.jpg',
'file': 'http://www.billarga.com/newsite/content/0000001/alexandra.mp4',
'controlbar': 'bottom',
'width': '100%',
'height': '100%'
});
</script>



Their code...
bc.. <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>


What is "...embed?utm_campaign=web&utm_source=embed"?

Awaiting your next one-line answer tomorrow :S

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

An iFrame is a way to link to a page inside of a page (kind of).

So they have:

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



And you could make it:
<div class="vendor">
          <iframe width="520px" height="391px" src="http://www.yoursite.com/player.html" frameborder="0" allowfullscreen></iframe>
</div>



And then player.html has your player code that you provided above.

Up Down

JW Player

User  
0 rated :

@Ethan.

Thank you for taking the time to provide some extra details. Very helpful. I'll give it a try.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

Up Down

JW Player

User  
0 rated :

@Ethan

Ok, finally got it to work with iframes and is now controlled by CSS width %.

Not sure I like the iframes option, but guess it will have to do for now. Finally I can get a move on with this project.

Thanks again Ethan!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Np!

Up Down

JW Player

User  
0 rated :

I'm working with JW Playr 5.8 and fitvids.js. I have fitvids set up correctly and it is scaling videos from YouTube that are embedded on my site.

But I'm still struggling to get JWplayer to be responsive with fitvids.

If I understand correctly, I can put my JW Player javascript embed code on a page, using width=100%/height=100%. Then call that page into an iFrame, which in turn, is then scalable/responsive.

But what I don't get is this:
Doesn't that mean I have to create a separate page just to "house" this 100%x100% JW Player embed code?

If I'm reading Ethan's explanation correctly that means I need to create hundreds of pages that just for video embed sources for iFrames?

This makes me think I must be totally missing something painfully obvious? Or, I'm just lazy. But with 200+ videos to embed on my site, there must be a more efficient method?

Am I missing something? Or do you really need to create a separate page for each video then call it to an iFrame in order to have a responsive JW player?

Best regards from Canada!

Chris

Up Down

JW Player

User  
0 rated :

As a Canadian, I felt obliged to reply.

You would call a page into the iframe thus in answer to your question you would need to make pages.

I can give you, if wanted a great function that will create your iframe one which I have used for years. It does require a bit of knowledge in JavaScript and DOM.

I have many examples of this on my web site especially in the section where I use flash apps to call an iframe that play a video using the JWPlayer.

Feel free to visit my web site, mirana.net have a look around and then IF you have additional questions contact me.

You may even enjoy the photo slide shows of the Canadian Rocky Mtns ;-)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Can you show me where you are running this?

Up Down

JW Player

User  
0 rated :

@Willie

Thank you so much for the reply and the patriotism! And my apologies for such a long interval in my own reply.

I checked out your site at www.mirana.net.

But I admit, I couldn't really discern where or how on your site you were using responsive JW player?

Being completely JS and PHP illiterate, I'm stuggling to keep up with some of the more informed answers here. But will keep trying to learn.

PS: Nice pics of Alberta and Europe.(I'm in BC).

@ethan

I am playing with MediaElementjs, which seems (so far) to enable me to have a perfectly responsive player with Flash fallback using width="100%" and height="100%".

But of course - I'd prefer to use a commercial JW player.

Do you think that JW Player might add the ability to set 100% dimensions anytime soon?

Thank you.

Kind regards,

Chris





Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Hmm, we do have a demo here – http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/hundredpercent.html

Up Down

JW Player

User  
0 rated :

@Ethan

lol.. are you saying "Hmmm" because this has been there all along?

If so - I don't know how I missed this? If this is part of JWplayer already - why use fitvids?

I mean - if I understand correctly - doesn't this completely solve the issue of responsiveness?

(thanks for being patient with my newbie-ness)

Chris

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

FitVids is a slick way to scale any video to any size, and it works with the JW Player, and yes, this has been there for a few versions now (the test page I linked above).

Up Down

JW Player

User  
0 rated :

Does fitvids work with JW Player on wordpress sites as well? My wordpress theme has full responsive layout however jw player does not automatically resize. Can see here: http://adiflash.com/adrian/jw-player/

Any way i can use fitvids for jw player to automatically resize with my theme?

Thanks!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I have not used the two together before, so I don’t know, sorry!

Up Down

JW Player

User  
0 rated :

then in general can jw player when used with flash automatically resize using fitvids?

Here it works well with html5 jw player: http://developer.longtailvideo.com/player/trunk/fl5/js/test/examples/hundredpercent.html

Can you do the same with the flash jw player?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, and that link is not using fitvids. Yes, you can do the same thing in Flash.

Up Down

JW Player

User  
0 rated :

Hi - I've got to find a way to do this without using an iframe. Can you think of a way to achieve the same effect with some sort of combination of jquery / javascript?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

The other other way is to do 100% by 100%.

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

Up Down

JW Player

User  
0 rated :

I'll give you a trick for a responsive JW player.
(I just finished two hours of work on it. It was not easy to figure out...).

You have to know two things :
<ul>
<li>VIDEO_WIDTH (& VIDEO_HEIGHT for the calculus below)</li>
<li>VIDEO_RATIO = 100 * VIDEO_HEIGHT / VIDEO_WIDTH</li>
</ul>

bc.. <div class="post_video" style="width: VIDEO_WIDTHpx;">
<div class="video_wrapper" style="padding-bottom: VIDEO_RATIO%;">
<div class="video_wrapper_inside">
<video id="the_video" src="SRC" width="100%" height="100%"></video>
</div>
</div>
</div>

<script>
bla bla
</script>



And the CSS :

bc.. .post_video {
width: 640px; /* prepared for 640x360 */
max-width: 100%;
margin: 18px auto;
}
.video_wrapper {
position: relative;
height: 0;
padding: 0 0 56.25%; /* prepared for 16/9 */
overflow: hidden;
}
.video_wrapper_inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



We have *.post_video* is sized by the width of the video given, but limited by 100%.
And the trick is that *.video_wrapper*, width the padding-bottom set a correct ratio.
Inside this wrapper, *</strong> take 100% of width and height and is positionned absolutely.
And inside, the div generated by the JS Embedder which size is 100% of width and width as we tell.

Tested on FF, Chrome & Android.

A bit complicated, but there is a <strong>position: relative* added in the inline style attribute of the inserted div by the JS Embedder that force us to add the *div.video_wrapper_inside*.

Enjoy.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice, thanks!

Up Down

JW Player

User  
0 rated :

Oh god. Explanation corrected:

We have *.post_video* which is sized by the given width, but limited by 100%.
And the trick is that for *.video_wrapper*, the padding-bottom sets the correct ratio.
Inside this wrapper, *.video_wrapper_inside* takes 100% of width and height and is positioned absolutely.
And inside again, there is the div generated by the JS Embedder which size is 100% of width and height as we tell.

Voil.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, thanks :)

Up Down

JW Player

User  
0 rated :

Whats up with the parsing errors????

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Rick – What are you talking about?

Up Down

JW Player

User  
0 rated :

a note for anyone finding this old thread a bit confusing - i was able to solve the problem of dynamically sizing the flash player without any of this iframe business by using good old javascript to manipulate the flash object width and height attributes. The player respects the new dimensions you give it (i believe you have to give the flash attributes an actual pixel value instead of 100%) and sizes the video accordingly.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks, do you have a demo of where you implemented this technique?

Up Down

JW Player

User  
0 rated :

Can someone please set up an working example with this, tried for many hours now and just cannot get it to work at all

I'd prefer not to use the iframe method but if that works that's fine.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Email me if you want to see a responsive demo of the player – ethan [at] longtailvideo [dot] com.

Up Down

JW Player

User  
0 rated :

I am very interested in this posting, but I am a novice and cannot understand the process. I am using JW Player via JoomlaRuleZ and I want to be able to display a YouTube playlist so that it is responsive. I am using the JW Player plugin, can you give me some very basic instructions, please.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You should ask Joomla Rulez about this.

Up Down

JW Player

User  
0 rated :

After trying all these things, I decided that I could easily write a small script to detect screen size change with JQUERY and apply a new height and width to my player container. The only important thing to note about this code is that you need to know your videos aspect ratio. It works PERFECTLY. It also handles orientation changes without any issues.

CSS:

bc.. <style type="text/css">
.videoContainer {
width: 100%;
}
</style>




HTML:

bc.. <div class="videoContainer">
<div id="player"></div>
</div>

<script type="text/javascript">

jwplayer("player").setup({

'id':'jwplayer',
'image': 'poster.jpg',
'width': '100%',
'height': '100%',
'smoothing': 'true',
'stretching': 'fill',
'allowscriptaccess': 'always',
'backcolor': '000000',
'flashplayer': "/assets/swf/player.swf",
'controlbar': 'bottom',
'file': 'video.mp4'
});

</script>





Jquery Resize code:

bc.. <script type="text/javascript" charset="utf-8">

$(document).ready(function() {

resizePlayer();

$(window).resize(function() {
resizePlayer();
});
});

function resizePlayer() {
screenSize = $(window).width();
newVideoWidth = screenSize;
newVideoHeight = (screenSize * 270) / 480;
$("#player").width(newVideoWidth);
$("#player").height(newVideoHeight);
}
</script>




My video is 16:9, I hard coded the values into my function. But if you know the ratio before hand, you could replace the values with variables that change depending on your video.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Cool, thanks for sharing this.

Up Down

JW Player

User  
0 rated :

This last script is great, but my video is 0px in height

What am I missing?

Thanks

Up Down

JW Player

User  
0 rated :

btw..

http://nickcrofts.com/bmd_portfolio/hiscox/

Up Down

JW Player

User  
0 rated :

jQuery issue

the jQuery $ shortcut was removed so I had to use jQuery();

Never easy.

Firefox looks quite strange on resizing right now though :(

Seriously - never easy

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got that part working.

What do you mean by strange? It seems to resize okay for me?

Up Down

JW Player

User  
0 rated :

With Firefox, the video window will expand WHILST you resize (i.e. only whilst dragging), but 'fallback' to its proper size when you stop dragging or release.

WIth safari, the vidoe WINDOW doesn't expand on resizing like firefox, but the CONTENT does. Like as though overflow = hidden.

I can live with it though

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Hm, weird, it seems fine on my end.

Up Down

JW Player

User  
0 rated :

Hey Stroudy,

Nice! What approach did you take to make that work?

Thanks for any info!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Todd – Check your email.

Up Down

JW Player

User  
0 rated :

Hey, Ethan. Thanks for your help with my MIME types issue. I'm still getting that worked out with the host.

In the meantime, are you able to see what I'm doing wrong on this page (please view in a browser other than IE, since I still need to resolve the MIME types issue, which only seems to be affecting IE)...

http://hope.casey.org/video/

I'm trying to use the fitvids method you described in this thread... not sure what I've done wrong, but the video isn't resizing.

Thanks!
-Jeff

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

The issue here in IE9 is because your MIME TYPE is text/plain for this video file, and it needs to be video/mp4.

Up Down

JW Player

User  
0 rated :

Yeah, still trying to get in touch with my server admin on that one. You think the MIME issue is affecting how FitVids renders the player in other browsers too?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I am not sure about FitVids, but I am 100% sure the MIME TYPE is causing the IE9 issue.

Up Down

JW Player

User  
0 rated :

Yes, I know, I believe you :)

The MIME issue is fixed now (I was just having a hard time getting ahold of my server admin.) The video plays now.

http://hope.casey.org/video

I'm just on this thread for FitVids help... but you have been more than generous with your time and patience already, so no worries if you don't feel like digging into my resizing issue as well.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

If you want to see a fitvids example of the player , email me – ethan [at] longtailvideo [dot] com.

This question has received the maximum number of answers.