Как правильно отобразить и выровнять мои адаптивные видео на YouTube? - PullRequest
Новая
       41

Как правильно отобразить и выровнять мои адаптивные видео на YouTube?

0 голосов
/ 02 ноября 2018

Я пытаюсь централизованно выровнять мои отзывчивые встроенные видео на YouTube и правильно отображать их между навигацией по верхнему и нижнему колонтитулам. На данный момент он не будет отображать все 3 видео, и они не будут правильно выровнены. Чтобы увидеть весь код, перейдите по этой ссылке: страница моего видео-видео

Вот основная кодировка видео, которую я пробовал: 

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:29.24%;
  height:auto;
}
<center>
  <strong><br />
  <p></p>
  <div class="video-container"><iframe width="560" height="315"         
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong></center>

1 Ответ

0 голосов
/ 02 ноября 2018

вам нужно назначить свойство css для видео контейнеров. 

.video-container {
  width: 500px;
  margin: auto;
  text-align: center;
  position: relative;
}
.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: auto;
  margin: auto;
}
<center>
  <strong><br />
  <p></p>
  <div class="video-container"><iframe width="560" height="315"         
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong>
   
</center>
...