Responsive Videos after Genesis 2.0 / HTML5

[RobCubbon]

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

Make a Copy “Dev” WordPress Site for Redesign

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?

---

Rob Cubbon

[Robin]

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.

---

I do the best I can with what I’ve got. (say hey on twitter)

[scotm]

Try this solution. Works great for me with 2.0:

http://bit.ly/1fKfddG

[RobCubbon]

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:

Make a Copy “Dev” WordPress Site for Redesign

Bulk Schedule Multiple Tweets with Hootsuite and a CSV

🙁

---

Rob Cubbon

[Robin]

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

---

I do the best I can with what I’ve got. (say hey on twitter)

[scotm]

@RobCubbon

Worth a try: http://embedresponsively.com/

[RobCubbon]

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 🙁

---

Rob Cubbon

[scotm]

@RobCubbon

RE: embedresponsively.com

Simply select YouTube, paste your YouTube video url, click, and the embed code is generated.

[RobCubbon]

Yes, but I've got loads of YouTube videos. I was hoping to find a solution that would work with the pasted YouTube URL.

---

Rob Cubbon

[scotm]

@RobCubbon

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?

[Robin]

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.

---

I do the best I can with what I’ve got. (say hey on twitter)

[RobCubbon]

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.

---

Rob Cubbon

[RobCubbon]

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.

---

Rob Cubbon

[mborger]

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

[RobCubbon]

For the Genesis Responsive Video, you just have to activate it. FitVids is real simple as well, although it does ask you to add a CSS descriptor, I think I added "body" in that field and it worked.

---

Rob Cubbon

[mborger]

I activated GRV but see no change. I cleared my browser cache, disabled my cache plugin, reloaded and see the same iframe code in the source as when the plugin is not activated.

When I put 'body' as the CSS selector in FitVids, my video disappeared completely (on my laptop).

This is what I have in the Home Featured widget:

<iframe width="620" height="390" src="//www.youtube.com/embed/FfRy_upxgkw?rel=0" frameborder="0" allowfullscreen alt="Watch How the Fun Things App Works"></iframe>

[RobCubbon]

Don't put the iframe in – try just :

http://www.youtube dot com/watch?v=FfRy_upxgkw

I couldn't put the proper URL in there because it turned into a video on this site 🙂

I can't remember what I put in that field for Fitvids – try some main wrap tag.

---

Rob Cubbon

[mborger]

GRV: Tried that, and all I got was the plain text of the URL in its place. I have it in a table...

<td rowspan="3">http://www.youtube.com/watch?v=FfRy_upxgkw</td>

[RobCubbon]

Ah, table! Is there any way you could do it without using tables?

---

Rob Cubbon

[mborger]

I updated it and put in columns instead of tables. I got it working now. Thanks for your help 🙂

[Author]

Posts