September 5, 2013 at 10:33 am #60873
Hello, what’s everyone doing to make sure their videos are responsive.
I’ve been using the FitVids WP plugin and I’ve been really happy with it.
However, I seem to have run into a weird glitch – maybe this occurred after Genesis 2.0 update or the HTML5 update I don’t know.
Look at this page
The first video looks great. Here’s the HTML it creates for the normal view: iframe width=”500″ height=”281″
Whereas the second has the following HTML: iframe width=”500″ height=”375″ – creating ugly black bars on top and bottom of video.
I’ve tried a couple of other responsive video plugins for WordPress – they’re even worse!
Anyone come across this issue or know of a great way to insert YouTube video that’s responsive?
September 7, 2013 at 4:11 pm #61270
How is the div styling being added? I see this for the div around the videos:
class="fluid-width-video-wrapper" style="padding-top: 56.2%;"
But in the second video, the padding-top is 75%. If I change that to 56.2% in the Chrome inspector, the black bar underneath goes away.
Lately I have been adding in a fluidvids js into my theme designs and coding it into the functions file so that it is hard coded in. I forget where I learned it from (took some Googling) but it’s pretty easy; all I have to do is put the youtube URL in and it’s responsive.
September 7, 2013 at 5:18 pm #61281
Try this solution. Works great for me with 2.0:September 8, 2013 at 4:43 am #61327
Hi, Robin, thanks, both videos were added in the same way – with the YouTube URL. The “fluid-width-video-wrapper” is added by the FitVids plugin. Is FluidVids just a case of FTPing it and calling it from the functions.php ?
Thank you scotm. I’ve just tried Genesis Responsive Video and exactly the same thing happened.
It’s weird. Both times the new video has the ugly black bars, the old video doesn’t:
September 8, 2013 at 10:50 am #61359
Yes, the fluidvids is pretty simple to implement. Two js files and a function enqueue. This may be where I found it?
I’ve got a page with it in use here: smtwo.org/videos and even with several videos down the page it’s behaving properly. I’ve been happy with how easy it is to use. HTH
September 9, 2013 at 11:46 am #61546September 10, 2013 at 5:45 am #61648
I’ve tried fluidvids, Robin, thanks, but it didn’t work. They weren’t responsive and the black bars are still there! I notice you’ve got a call to the FitVids JS in your footer on that page so maybe that’s why it’s working?
Thanks, scotm, that does look interesting. But if it’s just a case of adding CSS then why do all these plugins exist? But, more importantly, how could I add the CSS to get it to work? The example has a containing div whereas all my YouTube videos are the link pasted from YouTube which appear in iframes without any containing divs?
Thanks again for everyone’s help on this. However a responsive video solution for me remains elusive
September 10, 2013 at 5:50 am #61649
Simply select YouTube, paste your YouTube video url, click, and the embed code is generated.September 10, 2013 at 5:52 am #61650
Yes, but I’ve got loads of YouTube videos. I was hoping to find a solution that would work with the pasted YouTube URL.
September 10, 2013 at 6:10 am #61652
Gotcha. Well if you’re using Genesis I’m surprised the Genesis Responsive Video plugin doesn’t work for you. Have you de-activated any other plugins that might cause a conflict, such as another responsive video solution?September 10, 2013 at 6:48 am #61662
Oops, sorry, that site is using the fitvids plugin. I started doing the fluidvids a bit later I guess. Here’s one site with it, but it’s only one video–I was wondering if your issue was due to multiple videos maybe.
Could it be conflicting scripts, maybe? I see powerpress and mediaelements.js both, among other things. It also looks like you may have caching on your site (scripts being delivered through cdn) so that may be screwing up your results. I agree with Scot about deactivating plugins also.
September 11, 2013 at 5:43 am #61886
Actually Genesis Responsive Video plugin does work – just as well as Fitvids, basically. ie. all the videos are responding nicely but the same two new ones have the black bars.
Also, I’ve just realised the black bars are there even without any responsive video plugin. So maybe the problem isn’t with the responsive video method, the problem is with these two videos from YouTube?
But how could that be? They’re just the same as all the others. 16:9 – So maybe YouTube thinks these videos are 4:3 not 16:9 even though they were made exactly the same way.
So, maybe I’ve diagnosed this incorrectly and it’s a YouTube glitch.
Thanks again for your help.
September 11, 2013 at 10:51 am #61960
Yup. Looks like it’s a YouTube issue: https://productforums.google.com/forum/#!msg/youtube/san1boKOJUI/jf19qKPifhkJ
“YouTube is aware of the problem and has it on the list of things to fix…however, it is apparently way, way down the list.”
Sorry, I thought this was something to do with Genesis as it started occurring after I’d updated to 2.0 and gone HTML5.
November 5, 2013 at 4:09 pm #71123
mborgerParticipantPost count: 109
I’m trying to figure this out also. I’m using the Outreach theme and have a YouTube video on the home page that is not responsive and doesn’t view right on my iPhone.
I’ve installed both the FitVids and Genesis Responsive Video plugins mentioned in this thread, but I don’t see any instructions on how to use either one of them….. ? Appears to be above my pay grade… My site is http://funthingsapp.com/devNovember 6, 2013 at 4:52 am #71222
You must be logged in to reply to this topic.