How can I make a YouTube player scale to the width of the page but also keep the aspect ratio?

I want to scale the video to fit to a percent of the users browser but also to keep the aspect ratio.

Using CSS & html only.

Everyone give your best answer and I’ll pick which method I like best.

I’m sure there’s a lot of different ways to do this.

There is only one basic way to do this and is clearly explained in the following example.

It uses percentage padding to create an intronsic ratio between the width of the element and then the player is absolutely placed on that element and sized to fit.

You cannot size a video using percentage height as that has no relationship to the width.

3 Likes

I need help over here:

Code

the video doesn’t get smaller and larger.

<div class="outer">
  <div class="tcell">
    <div class="auto-resizable-iframe">
      <div>


        <div style="width:650px;display:block;" onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">

          <img src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;" /></div>


        <div id="thevideo">

          <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>
html,
body {
  width: 100%;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

.outer {
  display: table;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
}

.auto-resizable-iframe {
  max-width: 640px;
  margin: auto;
}

.auto-resizable-iframe > div {
  position: relative;
  padding-bottom: 75%;
  height: 0px;
}

.auto-resizable-iframe iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.auto-resizable-iframe iframe {
  border: 5px solid #5CB378;
  border-radius: 50px;
  cursor: pointer;
  background-color: #000000;
}

And I’m trying to add this to the css:

<img src="https://i.imgur.com/bQGFmLZ.png" style="width: 640px; height: 390px; cursor: pointer;background-color: black; border-radius:50px; border: 5px solid #5CB378;" /></div>

asasass,

You are cross-posting. Please stop addressing the same subject in two different threads.

2 Likes

ok ok

Just got up and didn’t see the other thread :slight_smile:

Thread closed

1 Like