Simple responsive iframe video

Damon answered on July 21, 2022 Popularity 10/10 Helpfulness 4/10

answer Simple responsive iframe video

Simple responsive iframe video

Comment

<div class="vidWrap">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/i51gcWCs-Ho" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
/*
Change width to decimal and divide (you should always get 100 for width)
560 / 5.60 = 100 (new width)
315 / 5.60 = 56.25 (new height)
*/

.vidWrap {
  position: relative;
  padding-bottom: 56.25%; /* New height */
  height: 0;
}
.vidWrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* New width */
  height: 100%;
}

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: Grepper

Tags: aspect-ratio iframe responsive video whatever

Link to this answer
Share Copy Link

Contributed on Jul 21 2022

Damon

0 Answers Avg Quality 2/10

Simple responsive iframe video

Contents

More Related Answers

Simple responsive iframe video

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.