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

4 replies
791 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

Nancy OShea

Community Expert

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>

Translate

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

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
}

Translate

Nancy OShea

Community Expert

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.

Translate

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

Try this link:

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

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.