resize video proportionally to its container

Question

I need to set up a video width/height accordingly to its container. Basically the video should have height 100% of its green container and the width should be variable.

plyr.setup();

body {
 margin: 0;
}

.plyr {
height: 100%;
  width :100%;
}

#wrapper{
  display: flex;
  justify-content:center;
  width: 900px;
  height: 500px;
  background-color: green;
}

<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
  <div>
    <div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div> 
    </div>
</div>

Please don't link to your code on 3rd party sites as those links can become dead over time and then your question will be meaningless here. — Scott Marcus, Nov 08 '17 at 15:58
In general, if you only want one direction to be fixed and the other to adjust to remain proportional, you just set the one that is fixed and do not specify anything about the other. — Scott Marcus, Nov 08 '17 at 16:05
You have a fixed height to 500px, apply it too to the iframe. here is the code generated by your script : `

` — G-Cyrillus, Nov 08 '17 at 16:07
@ScottMarcus thanks I am aware of it, but unfortunately does not work using plyr. — GibboK, Nov 08 '17 at 16:07
It is better to make a parent div with padding-bottom to a percentage of the video ratio. If youtube it is `16:9` and the padding percentage is ` 56.25%` with height `0`. Then make the iframe position `absolute` with height `100%`, width `100%`, top `0` and left `0`. This will scale the video from desktop to mobile proportionally. — Aakash Thapa, Nov 09 '17 at 03:49

score 1 · Answer 1 · answered Nov 08 '17 at 16:27

You can try this solution : add other class for player's generated html.

plyr.setup();

body {
margin: 0;
}
.plyr {
height: 100%;
width :100%;
}
#wrapper{
display: flex;
justify-content:center;
width: 900px;
height: 500px;
background-color: green;
}
.plyr__video-wrapper {
height: 100%;
}
.plyr__video-wrapper iframe {
width: 100%;
height: 100%;
}

<script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
<div id="wrapper">
    <div data-type="youtube" data-video-id="5p-Jdjo7sSQ"></div> 
</div>

Then your height/width percents will actually perfectly work.

score 0 · Answer 2 · answered Nov 08 '17 at 16:00

0

Under #wrapper, if you remove

display: flex;

Then your height/width percents will actually work. Then you can change the width to however you'd like in your JS.

answered Nov 08 '17 at 16:00

Jared Bledsoe

559
5
15

1

Yes Scott, I did. He had a link to the CodePen and it works if you try it where he posted - https://codepen.io/gibbok/pen/ZaBopR/ – Jared Bledsoe Nov 08 '17 at 16:09

score 0 · Answer 3 · answered Nov 09 '17 at 03:54

Try this. Fiddle

body {
  margin: 0;
}

.plyr {
height: 100%;
  width :100%;
}

#wrapper{
  display: flex;
  justify-content:center;
  width: 100%;
  background-color: green;
}

.plyr__video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
}

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

resize video proportionally to its container

3 Answers3