Aspect ratio on image and video

Victorious Vole answered on July 5, 2023 Popularity 9/10 Helpfulness 2/10

answer Aspect ratio on image and video

Aspect ratio on image and video

Comment

<div class="video-container" style="--aspect-ratio: 2 / 3;">
  <iframe src="..."></iframe>
</div>

.video-container {
  position: relative;
  padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
  height: 0;
  width: 100%;
}

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

Popularity 9/10 Helpfulness 2/10 Language html

Source: blog.webdevsimplified.com

Tags: aspect-ratio html image video

Link to this answer
Share Copy Link

Contributed on Jul 05 2023

Victorious Vole

0 Answers Avg Quality 2/10

Aspect ratio on image and video

Contents

More Related Answers

Aspect ratio on image and video

Grepper

Documentation

Social

Legal

Contact

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