Highlighted

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

New Here ,
Jan 09, 2020

Copy link to clipboard

Copied

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!

TOPICS
Bootstrap, How to

Views

350

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

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

New Here ,
Jan 09, 2020

Copy link to clipboard

Copied

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!

TOPICS
Bootstrap, How to

Views

351

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
Jan 09, 2020 0
LEGEND ,
Jan 09, 2020

Copy link to clipboard

Copied

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...
Jan 09, 2020 2
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.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...
Jan 09, 2020 2
LEGEND ,
Jan 09, 2020

Copy link to clipboard

Copied

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
}

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...
Jan 09, 2020 0
Adobe Community Professional ,
Jan 09, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.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...
Jan 09, 2020 1