Skip to main content
julies_adobe
julies_adobe
Participant
April 6, 2018
Answered

Embedded videos are not responsive

  • April 6, 2018
  • 4 replies
  • 1861 views

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><div class="video-responsive"><iframe width="550" height="385" src="https://www.youtube.com/embed/hjoBJKTqz-w?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

</p>

<p><div class="video-responsive"><iframe width="550" height="385" src="https://www.youtube.com/embed/6o7C6A_MexU?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></p>

<p><div class="video-responsive"><iframe width="550" height="385" src="https://www.youtube.com/embed/9LlsMKE2vhM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div></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;

}

This topic has been closed for replies.
Correct answer Nancy OShea

This is responsive.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<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 class="video-container">

<iframe width="550" height="385" src="https://www.youtube.com/embed/6o7C6A_MexU?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

<h3>Video #2</h3>

<div class="video-container">

<iframe width="550" height="385" src="https://www.youtube.com/embed/9LlsMKE2vhM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

</body>

</html>

4 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
April 6, 2018

This is responsive.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<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 class="video-container">

<iframe width="550" height="385" src="https://www.youtube.com/embed/6o7C6A_MexU?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

<h3>Video #2</h3>

<div class="video-container">

<iframe width="550" height="385" src="https://www.youtube.com/embed/9LlsMKE2vhM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
ALsp
ALsp
Legend
April 6, 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

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 6, 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
julies_adobe
julies_adobeAuthor
Participant
April 6, 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%;

   

}

julies_adobe
julies_adobeAuthor
Participant
April 6, 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!

ALsp
ALsp
Legend
April 6, 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/

ALsp
ALsp
Legend
April 6, 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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices