Skip to main content
A
aliematz
Participant
January 9, 2020
Question

Adding (embedding) YouTube clip with 100% coverage & shrink?

  • January 9, 2020
  • 2 replies
  • 772 views

HI, I want to embed my YouTube videos into a Dreamweaver page (using CC2020) so that it stays in proportion (16:9) but the width is 100% of the screen on whatever device it is viewed on and stays the same proportion (16:9) if the browser screen is enlarged or shrunk

 

Is there a tutorial anywhere that can help with this?

 

Many thanks in advance!

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 9, 2020

If you already use Bootstrap responsive layouts, proper aspect ratio is simple.  See code demo below.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<h2>Bootstrap in Dreamweaver</h2>
<p>Responsive video deomonstration.  This uses YouTube but any MP4 video will work. </p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<footer>Footer goes here.... </footer>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 

 

Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    January 9, 2020

    Whats not 'proper' about the code at the link I supplied. Its near as identical to what Bootstrap deploys, but a bit cleaner. It only uses whats necessary, not ALL of the the following junk:

     

     

    .embed-responsive .embed-responsive-item,
    .embed-responsive embed,
    .embed-responsive iframe,
    .embed-responsive object,
    .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
    }

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 9, 2020

    I didn't mean to imply your code wasn't "proper."  I only meant that proper aspect ratio is simple to maintain with Bootstrap classes.  No extra CSS required.  That's assuming the OP is already using Bootstrap for layouts of course. 

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      January 9, 2020

       

      Try this link:

       

      https://flaviocopes.com/responsive-youtube-videos/ 

       

       

       

       

       

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