1 Correct answer
Responsive YouTube. No Bootstrtap.
...<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive YouTube video</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 80%;
margin:0 auto;
}
.responsive-video{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.responsive-video iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
10
Replies
The pictures on my website are responsive. They change with the size of the page on mobile devices, so that you can actually see the complete image. When I pull this website with the video up on my mobile device or in a shrunken window of any web browser the video stays fixed at one size instead of changing (just like the pictures on my site) with the size of the screen.
Basically, before hitting play and full screen on the video, the tumbnail to the video is so large it cuts off on mobile devices. I don't want that. I want to scale responsively with the page.
If you had taken my earlier suggestion and rebuilt your site with Bootstrap, this would be a snap using the built-in responsive embed utility classes. The code can be easily inserted from the Bootstrap Snippets in DW CC. See screenshot.
This code maintains responsive video + the correct aspect ratio (21:9, 16:9, 4:3 or 1:1) when video or slideshows are re-scaled to fit all devices.
<!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>Responsive Embed</h2>
<p>Create a responsive video and scale it nicely to the parent element on any viewport.</p>
</div>
</div>
<div class="row">
<div class="col">
<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>
<hr>
<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>
<hr>
<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>
<hr>
<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>
<div class="row">
<footer> Footer goes here.... </footer>
</div>
</div>
<!--First jQuery then Popper then Bootstrap JS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
It's not too late to take up the Bootstrap challenge. The learning curve isn't difficult but you must apply certain rules to your markup for Bootstrap to work. And I'm afraid most of your current HTML & CSS would go in the trash.
AdChoices