Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive Videos after Genesis 2.0 / HTML5
Tagged: responsive, video
- This topic has 19 replies, 4 voices, and was last updated 10 years, 4 months ago by mborger.
-
AuthorPosts
-
September 5, 2013 at 10:33 am #60873RobCubbonMember
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?
September 7, 2013 at 4:11 pm #61270RobinMemberHow 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)
September 7, 2013 at 5:18 pm #61281scotmMemberTry this solution. Works great for me with 2.0:
September 8, 2013 at 4:43 am #61327RobCubbonMemberHi, 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/🙁
September 8, 2013 at 10:50 am #61359RobinMemberYes, 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)
September 9, 2013 at 11:46 am #61546scotmMemberWorth a try: http://embedresponsively.com/
September 10, 2013 at 5:45 am #61648RobCubbonMemberI'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 #61649scotmMemberRE: embedresponsively.com
Simply select YouTube, paste your YouTube video url, click, and the embed code is generated.
September 10, 2013 at 5:52 am #61650RobCubbonMemberYes, 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 #61652scotmMemberGotcha. 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 #61662RobinMemberOops, 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)
September 11, 2013 at 5:43 am #61886RobCubbonMemberActually 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 #61960RobCubbonMemberYup. 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 #71123mborgerMemberI'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
November 6, 2013 at 4:52 am #71222RobCubbonMemberFor 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.
November 6, 2013 at 12:17 pm #71284mborgerMemberI 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>
November 6, 2013 at 12:48 pm #71291RobCubbonMemberDon'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.
November 6, 2013 at 1:05 pm #71298mborgerMemberGRV: 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>
November 6, 2013 at 5:35 pm #71334RobCubbonMemberNovember 6, 2013 at 7:50 pm #71369mborgerMemberI updated it and put in columns instead of tables. I got it working now. Thanks for your help 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.