Responsive Videos after Genesis 2.0 / HTML5

Community Forums Forums Design Tips and Tricks Responsive Videos after Genesis 2.0 / HTML5

This topic is: not resolved

Tagged: ,

This topic contains 19 replies, has 4 voices, and was last updated by  mborger 1 year, 1 month ago.

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #60873

    RobCubbon
    Participant
    Post count: 105

    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

    http://robcubbon.com/copy-wordpress-site-private-redesign-development/

    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?


    #61270

    Robin
    Participant
    Post count: 327

    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)

    #61281

    scotm
    Participant
    Post count: 35

    Try this solution. Works great for me with 2.0:

    http://bit.ly/1fKfddG

    #61327

    RobCubbon
    Participant
    Post count: 105

    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:

    http://robcubbon.com/copy-wordpress-site-private-redesign-development/

    http://robcubbon.com/bulk-schedule-multiple-tweets-hootsuite-csv/

    :(


    #61359

    Robin
    Participant
    Post count: 327

    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)

    #61546

    scotm
    Participant
    Post count: 35
    #61648

    RobCubbon
    Participant
    Post count: 105

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


    #61649

    scotm
    Participant
    Post count: 35

    @RobCubbon

    RE: embedresponsively.com

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

    #61650

    RobCubbon
    Participant
    Post count: 105

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


    #61652

    scotm
    Participant
    Post count: 35

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

    #61662

    Robin
    Participant
    Post count: 327

    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)

    #61886

    RobCubbon
    Participant
    Post count: 105

    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.


    #61960

    RobCubbon
    Participant
    Post count: 105

    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.


    #71123

    mborger
    Participant
    Post count: 114

    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

    #71222

    RobCubbon
    Participant
    Post count: 105

    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.


Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.