How do you add a responsive YouTube video in RW Blog


(Pip) #1

I have no problem adding a responsive video into a stacks page, but how does one do it in a standard RW blog page without stacks.

I can just embed the code, that’s easy, but it isn’t responsive and so looks totally wrong on a mobile device. I’ve tried taking out the width and height settings, but no joy.

Any pointers much appreciated.


(Rob Beattie) #2

http://embedresponsively.com/ - type in the url of the video and this will generate the html you need.

Rob


(Pip) #3

Amazing Rob. What an elegant solution. Dropped the code in and checked it on my laptop and my Blackberry Passport and it is working perfectly :grinning:

A massive thanks Rob.


(Rob Beattie) #4

My pleasure. It’s a neat little service and one worth bookmarking.


(Pip) #5

Totally right about bookmarking it. As soon as I’d tested it and seen it worked perfect it was straight in my ‘Website Building and Blogging’ bookmarks. I will definitely be using it again.

Cheers Rob.


(Will Woodgate) #6

Perhaps worth mentioning too that some addon RapidWeaver themes include the free FitVids.js plugin as standard, therefore removing the need to re-generate embed codes. In such instances, you would be able to continue using standard YouTube / Vimeo code and the theme will make them responsive for you.


(Rob Beattie) #7

Would these include Themeflood themes, Will? :sunglasses:


(Will Woodgate) #8

Yes all my themes have included FitVids and some other responsive / retina optimisations for a couple of years. I believe there are some other theme developers who provide the same in their designs too.


(Pip) #9

I tried that, but the theme I’m using mustn’t have it Will.


(Gabrielle Vickery) #10

Hiya, I have been having the same issue today and thanks to Rob’s neat link my videos are now responsive, woop woop!

Thanks! :wink:


(Peter Charles) #11

OK, tried this and it worked fine, except for one small fiddle: the left edge of the video is being cut off. I’ve played with the ‘left’ position setting and the video sizing parameters to no avail. I think that the theme may be responsible and I’ve solved the same problem elsewhere with increasing the left padding, but can’t seem to get that working here.

My javascript knowledge is sorely lacking, so any help would be appreciated.

You can see the video left edge cutting effect here: http://www.hooked4life.ca/h4l/blog_and_tech/blog_and_tech_files/tube_design.php
Scroll down to see the video. The title is supposed to read “Upeye - Downeye” but the “Up” of “Upeye” is cut off along with the left edge of the frame.


(Will Woodgate) #12

Try the following custom CSS:

.edgeFull {
    margin: 0px !important;
}

Presumably this is a helper class in the theme. It normally applies a negative horizontal margin of 40px to pull content to the extreme edges of a container. It might not be compatible with blogs or within the context in which you are using it. So it either needs to be overridden with CSS code or if you can modify your HTML embed code for the video, remove the following…

class="edgeFull"

This is the result of the CSS override:


(Peter Charles) #13

Thanks, the custom CSS did the job quite nicely and didn’t seem to upset anything else.


(Marcel) #14

That’s great. Exactly what I wanted. Thank you very much.

Marcel