Embedded videos are not responsive

Report · Apr 06, 2018

Hi,

I'm using the Dreamweaver template called "Basic Multi-Column for a website. The responsive CSS for embedded videos has me stumped (I just know CSS basics). I found a tutorial online, and I tried to enter the code, but there is a problem. Could the CSS have something else in the file that is preventing this code from working? Or have I made a mistake? Any input would be appreciated. Here is the page: Handkerchief Wave http://handkerchiefwave.com/music.html

This is the code on the page:

</p>

This is from the CSS file:

.video-responsive {

overflow:hidden;

padding-bottom:56.25%;

position:relative;

height:0;

}

.video-responsive iframe{

left:0;

top:0;

max-width: 400px;

max-height: 200px;

position:absolute;

}

Report · Apr 06, 2018

Those CSS rules you found need to be actually inserted into your CSS file. Currently they are not. The rules are:

.video-responsive {

overflow:hidden;

padding-bottom:56.25%;

position:relative;

height:0;

}

.video-responsive iframe{

left:0;

top:0;

max-width: 400px;

max-height: 200px;

position:absolute;

}

Add the above rules to your CSS file and the vids will be scalable. However, do note that your page is a poster child for why never to use the page templates or page building methods that come with Dreamweaver. They will lead you into a corner from which there will only come pain... unless you have an advanced understanding of CSS. But if were that good with CSS, you would never have to rely on Adobe's poor methods. You would be better server either learning CSS or using a third-part page-building extension from a reputable source who will provide proper support.

Report · Apr 06, 2018

Hi,

By third party, you mean a provider like Wix, etc? I am not sure what happened there, but I uploaded the CSS file again to be sure it was online, and in the Develop menu, I checked the CSS file. The code is there; if it wasn't before, I don't know why. Anyway, it still doesn't work. Any ideas?

Thank you!

Report · Apr 06, 2018

You placed the rules inside this media query:

@media (max-width: 320px) {

So, the videos are only going to be scalable if your window or device is less than 321 pixels wide.

By third-part extensions, I meant ones for Dreamweaver, such as

http://www.projectseven.com/

Report · Apr 06, 2018

Ok,

I will look into the extensions. I tried this under the body section of the CSS file (and out of @media), and it worked. Not sure if it's right, but it works. The only odd thing I notice is that now, when viewing at 1920x1080 in responsive design mode, there is a lot of space below the videos. Is there something I can add to eliminate the extra space for viewing at higher resolution? At least the videos display properly on mobile devices now. That was the main objective... one item scratched off the list of concerns!

Thank you!

.video-responsive {

position:relative;

padding-bottom:50.25%;

padding-top: 20px;

height:0;

overflow:hidden;

}

.video-responsive iframe,

.video-responsive object,

.video-responsive embed {

position:absolute;

top:0;

left:0;

max-width: 95%;

max-height: 95%;

}

Report · Apr 06, 2018

This is responsive.

<!doctype html>

<head>

<title>Responsive Video Iframe</title>

<style>

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 35px;

height: 0;

overflow: hidden;

}

.video-container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<h3>Video #1</h3>

</div>

<h3>Video #2</h3>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 06, 2018

Well, Nancy

His code will actually work, but the page itself is horribly coded. That's what happens when you use Adobe code.

That said, this is the CSS we recommend using for responsive iframe vids. It's almost identical to yours:

.video-wrapper {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0px;

overflow: hidden;

}

.video-wrapper iframe, .video-wrapper object, .video-wrapper embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

And to fine-tuning things, this tutorial is indispensable:

http://www.projectseven.com/products/tools/lbm/tutorials/vid-map-aspect-ratio/index.htm

Report · Apr 06, 2018

ALsp wrote
Well, Nancy
That said, this is the CSS we recommend using for responsive iframe vids. It's almost identical to yours:

I'm not sure what "Adobe Code" means exactly.

But aren't you just tickled pink that I didn't post a Bootstrap example?

That said, if you're using Bootstrap layouts (I know you don't, Al), the code to maintain aspect ratio is very simple and no extra CSS is required.

Embedded 4:3 Responsive Aspect Ratio (YouTube video)

<div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> </div>

Embedded 16:9 Responsive Aspect Ratio (YouTube video)

<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe> </div>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 06, 2018

This is why Bootstrap is so bloated. Of course you can pack many permutations. We even do that, within reason, with color palettes. But people either think Bootstrap i the bees knees, or laughable. There is no in-between . This is just an issue where we are at polar odds. It happens. But you know, now that I think about it, we've had customers with homemade vids that were 18 by 3

But I fail to see what this thread has to do with Bootstrap. There is no reason to hijack it, so maybe let me have the last word here and let's not change the focus from the original poster.

Adobe Community

Embedded videos are not responsive

1 Correct answer