Responsive Youtube Embed Tutorial -...

User 2917932 Photo


Registered User
26 posts

Hello Everyone,

Here's is how to make your Youtube videos responsive to screen size, probably this is old hat by now.

Drag a HTML Element onto the canvas or into container or where ever you would like it.
Double click the HTML Element on the canvas and give it the class name of video-responsive in the Type Class box in the Class Selector properties.

Also go to Youtube to get your video link, click on the SHARE button under the video and select the embed video option and copy the code and then paste it into the HTML Element HTML box.

Next make a text file and give it the name responsive-video.css and paste this css code into it.

.video-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.video-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

Next attach the Style Sheet into your webpage by going Pages and then Click the Page Manager and go down to the Add a local CSS or Javascript button and click it and add the responsive-video.css file to the project folder by clicking the Add Files button.

Hope this works out good for you, have a great day!
User 187934 Photo


Senior Advisor
20,181 posts

Hi Warren,
SD comes with a video element that's responsive. Paste the link to the video into the Video Url: area and your all set.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2917932 Photo


Registered User
26 posts

Thanks Eric, I will check that out, sounds like it will save some time.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.