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.
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="">
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.
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.
An iFrame is a way to link to a page inside of a page (kind of).
So they have:
<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:
<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.
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?
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*.
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.
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.
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.
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)...
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.