Auto rescale of playlist player to adjust to browser dimensions?
Relatively simple maybe -
i built a basic playlist player; i want it to resize/rescale to the browser dimensions automatically upon user resizing the browser.
I am trying to treat it the same as a swf file, such that i know how to make a swf file auto resize/rescale in standard html, but in the case of the playlist, i cant seem to understand how to do it, any ideas? i've searched around in the forum for a couple of days. cheers
this is the playlist file "http://fakeshop.com/video_archive.html"
It seems that fitvids uses <iframe> and <embed> to accomplish the autoscaling
this is the code from their sample page <code><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><code>
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
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):
bc.. 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: bc.. <div id='mediaspace'>This text will be replaced</div>
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..
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.
If you mean the last example in tests.html, then that was what I was referring to when I said bc.. "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" ... bc.. <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.
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.
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 ...
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
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.
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.
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...
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 !
bc.. *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 <code>width: 100%, height: 100%</code> 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-internet-explorer-100-widthheight) 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.
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!
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.
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?
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.
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 !
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
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?
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?
I'm hoping someone might be able to help me here...
I've been looking through this and many other posts, and have tried just about everything I can think of, in order to try and get the JW player to work with responsive design...nothing is working for me.
I unfortunately don't really have a link to share at this point, as I'm only just building the site, trying to get the layout set and functioning before adding the content.
I'm using the latest version of JW player, Wordpress 3.4 and a fluid layout theme. I simply can't get it work with the fluid theme or size properly in the layout for mobile. I'm not using the JW player as a plugin, but instead have manually added the js files and scripts, as using the plugin was proving to be even more frustrating, especially with mobile. I have confirmed that my file is h.264, the qt index has been swapped, and I have tried just about every variation of code presented in this and a couple of the other posts that try to deal with the adaptive design issue.
I've tried using the fitvid plugin as well with Wordpress, but as soon as I activate it, everything else goes to, well...it doesn't work. Sound but no video. If I try to use percentages in the player call script, it doesn't work...I can get sound, but no video, and 0 height on the container. If I try to use pixel dimensions in the script and then style the div with CSS, it has no affect. If I try to use iframes, I get no video. If try to use <video> commands, it's not working. The best I can seem to make happen with some of the examples in the posts here, is that the post box will size to the video, but there is only sound, no video and no player.
I tried some of this with the mediaelement.js to see if I could get it work with that, and at best, the same conditions seem to present...sound, but no video....although it wasn't breaking the div borders on desktop, but also won't let me adjust the window size without automatically snapping back. On mobile it's acting the same as JW player.
Admittedly, I am NOT a programmer within any stretch of the imagination!...I have been trying to almost reverse-engineer some of the suggestions. So granted, my understanding of all the rules is sketchy at best. Is this simply a Wordpress issue though? From the way I have read some of the posts here, it almost sounds as though if I had built the site in Dreamweaver, it might be easier to get JW player acting the way others have gotten it to, here. Am I missing something simple and obvious? Or am I simply S.O.L?? Any direction would be MORE than graciously appreciated! Sorry for the novel... :)
Yes, a link would be helpful... haha Funny thing is, is that I have tried so many different things at this point, I was basically back to zero with a blank page, not totally remembering all of the options I've tried!? :)
However, here are a few examples I put back up for you to see:
http://www.metaldrummingmaster.com
This is with the mediaelement.js, as an alternative example, still not acting the way I want it to.
If I activate the fitvids plugin, than on this page I get sound but no video...but the post box is still sized to the video player, unlink the /what-is-mdm page.
I had tried one other variation as well, of which I can't recall what code I was using, but it gave me the same result as this last page here: Sound but no video, with the post box still sized to where the player would be.
So did I just make it easier or more complicated?!?! haha ;)
Thanks for taking a look at this! I really want to be able to use the JW player, for many reasons....I'm desperately hoping I can get it to work with the fluid layout. :)
A couple examples of the youtube posts you'll see on the page, I've been able to get those fluid through a flexvideo CSS styling in the theme, both in the main posts as well as the sidebar widgets...but it has no affect the players, unfortunately. And using youtube or Vimeo or the like simply isn't an option...I really want to use a CDN and JW player. :)
The other links didn’t work for me, but http://metaldrummingmastery.com/the-guarantee/, does. Can you activate FitVids on this page? One other idea would be to just put the player into an iFrame.
The other links didn't work for you in what sense? Couldn't get to the page, or nothing was happening on those pages? On the http://www.metaldrummingmastery.com/what-is-mdm for example, the way it's set up with the player now, there's nothing showing in the post, but the music should be auto-playing...is that happening for you?
Oh, and the CSS activator I'm using for Fitvids is .post_container...although I have tried just about every other possibility, based on the CSS Firebox showed me. Hope that helps! Thanks again, Ethan!
My apologies for the continues separate notes here... Just keep thinking of questions that might be asked, to hopefully make the diagnosis a little easier! ;)
The one last variable I thought I would comment on, is that in the setting for the Fitvids plugin, I have tried both on and off, with the "Add jQuery 1.7.2 from Google CND" option...both producing the same result.
Although, I'm not totally sure how to make sense of this...? Which parts should I try to implement within my own page, so that it uses the JW player? Where/how are they calling the player within the iFrame?
And just to clarify, which is the example you are referring to? Is it
I am referring to both of those. I would recommend downloading FitVids and running the readme file on your webserver. I have never used it inside of WP before, though.
I've read the readme file....and please forgive me, as I am clearly missing something simple/obvious, but how does bc.. $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"}); for example, call the jw player? This is where I'm stumped. Wordpress or no Wordpress, I'm not understanding how to implement this into a page with the player
You would have a blank html page with the JW Player on your site, and then you would replace “http://mycoolvideosite.com” with “http://www.mysite.com/jwplayer.html”, for example.
OH!!!! Okay, I get it!!! Thank you thank you thank you!!!!
To further clarify:
From the example above then: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>
If I'm using the JW player, is the src where I would put the individual video file url's, or would this src be the same /jwplayer.html file? Or would this div and iFrame be how I am setting up the JWplayer on my blank html page?
Or, in the bc.. $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
is the "#thing-with-videos", is this where the call for the specific file is being made?
I guess what I'm hoping to clarify, is whether the above code is what I would use and make specific to each individual video, calling one generic JWplayer setup on the blank html page, or do I use the above code to call the html page, but need to make a unique /jwplayer.html page for each video I want to use throughout the site?
Okay, I'm going to give this all a try. I had just tried to create a blank html page with the player in Dreamweaver, and encountered the same problem when I tried to use %'s...but looking at your example here, I think I understand why, now. I wasn't using the correct inline CSS like your example here, most notably, defining the html and body H/W.
Thank you again for all your help and patience with this, Ethan! Can't tell you how much it is appreciated!! Hopefully this will help some others as well, especially with the whole WP integration.
One more question: I've been wanting to test the formatting and function of the player within my site before upgrading to the commercial license. Will upgrading have any affect or bring any special needs to the coding I'm trying to implement with the free player?
Oh, and I tried the fitvids WP plugin...it was causing me issues as well!? As soon as I activated it, the video disappeared. Deactivate, it reappeared. Strange...
Funny thing, I actually left a post on Kevin Dees' site earlier, to ask why the video disappeared when the plugin is activated. If I get a response, I'll post the link so that it might help others!
The WPMU plugin looks really promising as well....going to try that one out now. Thanks for the link!
Ethan, with your help here as well as learning from other posts, I have been able to successfully make the JW player adaptive in Wordpress! Without even using the fitvids plugin or anything else...all through iFrames, and CSS like in Ben's post above. Not the simplest solution if someone doesn't want, or know how to make separate html files and manually add them to the WP install file directory...but a solution none the less!
Thank you again for your help understanding this!
Not really in the purview of this post, but, in Ethan H's post above, he's using php to call the url's of various files. I'm assuming this is to mask the file urls's? Is there a simple explanation of how to apply this?
Was wondering if you might be able to help me with this:
http://www.metaldrummingmastery.com
Notice how the control bar is being cut off a bit, but peeks out as you resize the window? Based on everything we've already talked about in order to set up the player in the iframe with the html embed, any ideas why this cropping is happening?
Since you are using an iframe to display your video, I'd like to suggest that you change a couple of things
Since you are declaring your iframe as 600 x 340 then I would also declare for the JWPLayer 600 x 340. This will then apply the controlbar to the video stream that you are using with a total height of 340.
This specifies that the JWPlayer will be 600x340 that includes your controlbar being at the bottom which in fact makes the video size less than the size of the controlbar BUT still 600x340 as defined in your option listing.
iframe is a 'tricky' creature BUT extremely powerful when it is mastered. I use the iframe alot on my web site especially in the multimedia video section.
There are several other techniques that could be at your disposal such as dynamically sizing an iframe BUT that is another story.
If you want the better tutorial, if interested, on iframe then I'd recommend that you have a peek at this link that will give you a good understanding on the iframe
Willie- Thank you so much for the advice! Changing the player dimensions to match the iFrame did indeed solve the cropping issue, but then didn't size dynamically with the page...so it looks like I need to look into "another story"!! :) Thank you for the samisite link as well! I've got some reading to do... I know that I have seen your name often in a number of posts through the forum here, I'd love to see the site you refer to, here!?
Ethan- Changing the height percentage worked to get the control bar back, while still keeping the player dynamic!
Hi guys, OMG... I am no webdesigner but still would like to get JWplayer in WP running with responsive design/automatic resizing.
Is there anywhere out there a simple "how to" explanation step by step?
As I am no specialist, I feel not able to figure out, which of the above is really needed for to create a slution running on all devices etc. I feel like: maybe I find out a way how to get it done on my system BUT......... (see above problems).
@ethan: TY so very much for your kind and helpful replies!
We are planning on getting this official working with JW6 + WP after the next version of the player is released. I’m afraid we don’t have a basic step by step guide for this though. I found that this technique works with the JW Player (manual HTML, though) – http://webdesignerwall.com/tutorials/css-elastic-videos
@chris Thank you so much for the code. After long time to search to do a playlist with auto rescale, i understand that most of the last post are just for the release 6.x of jwplayer.
I don't like to use fitvid for the need to do a lot of "dump" html file to recall in iframe (we have more than 300 playlists).
We can't move form 5.x release becasue the 6.x don't support files that we have (thousand) so we plan to do the future recording in pure mp4/h264 and later upgrade to it.
This is a simply implementation of your code that i made adding also iscroll.js for solve ipad scrolling problem.
The UPPERCASE are the part that MUST be changed for your server.
I used for the playlist the rss format (suggested) but also xml format run the same (tested). I tested with firefox and chrome on fedora 17 system.
Hope can help someone like me that need FULL examples
I'm doing this on a joomla 1.5.x sites (that is not native responsive but using a good templates it became responsive) and i'm using 5.10 version of jwplayer.
The link for this code is http://www.losport.tv/100-player and the files are old (640x480 container f4v) so don't care about quality
The site is under strong rebuilding and you can find other movies in hd quality. Sometimes is closed, i open it just now for you for one hour
I'm trying to set a playlist where the list of the files are in a position (div) and the player displayed in other position like i remember to watched on some examples
