Highlighted

Embedded videos are not responsive

New Here ,
Apr 06, 2018

Copy link to clipboard

Copied

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;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

746

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Embedded videos are not responsive

New Here ,
Apr 06, 2018

Copy link to clipboard

Copied

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;

}

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

747

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 06, 2018 0
Mentor ,
Apr 06, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
New Here ,
Apr 06, 2018

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
Mentor ,
Apr 06, 2018

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
New Here ,
Apr 06, 2018

Copy link to clipboard

Copied

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%;

   

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
Adobe Community Professional ,
Apr 06, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
Mentor ,
Apr 06, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
Adobe Community Professional ,
Apr 06, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
ALsp LATEST
Mentor ,
Apr 06, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0