How can I add a max size to my youtube videos?

Question

I'm new to stackoverflow and to web design in general so I apologize if this is an easy fix (it probably is, I'm still learning) or if my vernacular is not right.

I'm just trying to make it so my youtube videos wont get bigger than a particular size. They look how I want them to on mobile devices and tablets because of the "mobile.css" code I wrote into it. But on a larger screen it takes up way too much space and I want to limit how big the videos appear. I hope this makes sense. Thanks so much for your help!

I've tried doing a bunch of things but can't find something that works with my "mobile.css" code. I have decreased the size of the videos on a computer screen but then it makes them smaller on a phone or tablet too which I don't want.

<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

This is the entire page guys. Hopefully this helps.

<!DOCTYPE html>
<html>
<head>

<body style="background-color:linen;">

<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #185a83;
}
</style>
</head>
<body>

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="quotes.html">Quotes</a></li>
  <li><a class="active" href="youtube.html">Youtube</a></li>
  <li><a href="blog.html">My Blog</a></li>
</ul>


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Page Title</title>
</head>
<body>

    <br>
    <br>

<h1 style="color:black;text-align:center">Some Helpful YouTube Videos</h1>

<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>


<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/drv3BP0Fdi8" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/JWUuno-K5YE" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/Lp7E973zozc" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/w7rewjFNiys" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>

Have you tried setting a [`max-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) on your `.video-wrap` / `.video-container` / `iframe`? — Obsidian Age, Jun 26 '19 at 23:12
Can you provide your css code you are using for mobile and desktop? — AdityaSrivast, Jun 29 '19 at 19:10

Claire · Answer 1 · 2019-06-27T04:48:47.703

What you want is surprisingly complicated to achieve, even though you'd expect it to be quite simple. A fully responsive embedded iframe video can be achieved via a small workaround. Basically you need to wrap your iframe in a container with a position of relative so that you can absolutely position the iframe within, limiting the overflow and creating an artificial bottom using padding to offset the aspect ratio.

Consider this example: https://jsfiddle.net/8kh9j7wx/1/

The video will always stay within the confines of the parent element, and will always maintain 100% width of said element, all while maintaining the ever-important aspect ratio that the other answers here fail to address.

Here is your modified markup:

<div class="video-responsive">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/2SUqC8PGrtU" frameborder="0" allowfullscreen></iframe>
</div>

Here is your CSS:

.video-container {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

You can, of course, limit the width to a maximum by declaring a max-width on your container element, and center it using a margin:auto.

this is already answered in stackoverflow:https://stackoverflow.com/questions/17838607/making-an-iframe-responsive copying and pasting is not a good way i guess :P — Atul Mathew, Jun 27 '19 at 04:48
@marcelo actually this technique is well known. I originally read about it [here](https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/) and [here](https://benmarshall.me/responsive-iframes/) — Claire, Jun 27 '19 at 05:06
ok, I agree but if a question already has an answer I think you know what to do. — Atul Mathew, Jun 27 '19 at 05:09

score -1 · Answer 2 · 2019-06-27T04:37:17.580

-1

just add height and width to iframe

if you want occupy the element total width then make width:100%

or you can also specify the height and width based on your requirements like this,

iframe{
height:300px;
width:300px;
}

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

edited Jun 27 '19 at 04:37

answered Jun 27 '19 at 03:18

This will cause the video to be `300px` in height no matter how wide it is. Not what anybody wants. – Claire Jun 27 '19 at 03:59
1

ya, read the question he wants to limit the size of the video to particular size – Jun 27 '19 at 04:24
fair enough. the video will still be contained to those fixed dimensions though, and will not maintain aspect ratio. check my answer for a complete example. – Claire Jun 27 '19 at 04:46

Makdia Hussain · Answer 3 · 2019-06-27T04:57:04.773

-1

You can add CSS width and height property. When the CSS width and height property is set in a percentage value, the video will scale up and down when resizing the browser window. Resize the browser window to see the effect.

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

edited Jun 27 '19 at 04:57

answered Jun 27 '19 at 03:50

Makdia Hussain

744
3
11

this will cause the video height to always be 250px no matter the width. – Claire Jun 27 '19 at 04:28
Yes, but we can set the height to auto or we can give a desired height. – Makdia Hussain Jun 27 '19 at 04:36
that's not responsive at all – Claire Jun 27 '19 at 04:37
Yes I got your point and I updated my code to make it more responsive. Thank you @Claire – Makdia Hussain Jun 27 '19 at 04:58

How can I add a max size to my youtube videos?

3 Answers3