Блог

Короткий вопрос, есть ли способ покрыть весь iframe фиксированной высотой и полной шириной?

Я не могу заставить его работать со стандартным источником видео и тегом видео, но не с Iframe.

 lt;div class="video-container"gt;  lt;iframe src="https://player.vimeo.com/video/1084537?h=b1b3ab5aa2"gt;lt;/iframegt;    lt;div class="headline"gt;  lt;h1gt;Lorem dolorlt;/h1gt;  lt;h2gt;Lorem dolor ipsuim silt;br /gt;Lorem dolor ipsum loremlt;/h2gt;  lt;/divgt;  lt;/divgt;    lt;stylegt;    .video-container {  height: 500px;  width: auto;  position: relative;  object-fit: cover;  }    .video-container iframe {  width: 100%;  height: 100%;  position: absolute;  object-fit: cover;  z-index: 0;  }      .video-container .headline{  color: #fff;  z-index: 1;  position: relative;  text-align: center;  color: #dc0000;  padding: 10px;  top: 50%;  transform: translateY(-50%);  }    .video-container .Headline H1, H2{ /* headline and subheading */  color: #ffffff;  }    lt;/stylegt;  

Проверьте это,

Создан с фиксированной высотой и шириной.

 lt;div style='width:100%;border:3px solid #ddd;padding:10px'gt;  lt;div style='display:flex;justify-content:center'gt;  lt;div style=" overflow: hidden; border: solid 12px rgb(177, 10, 10); width:594px; height:332px;"gt;   lt;iframe src="https://player.vimeo.com/video/1084537?h=b1b3ab5aa2/" scrolling="no" style="  height: 335px ; border: 2px solid;  width: 593px ; "gt;  lt;/iframegt;   lt;/divgt;  lt;/divgt; lt;/divgt; 

Экран обложки видео

 lt;divgt;  lt;iframe src="https://player.vimeo.com/video/1084537?h=b1b3ab5aa2/" scrolling="no"  style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; overflow:hidden; z-index:999999;" gt;  lt;/iframegt;   lt;/divgt; 

1. Меняйте высоту и ширину по мере необходимости.
2. вы также можете выровнять видео слева, справа и по центру страницы.