如何正确显示和居中对齐我的响应式 youtube 视频？

Posted 2023-03-05

【中文标题】如何正确显示和居中对齐我的响应式 youtube 视频？

【英文标题】：How do I display and centre align my responsive youtube videos properly?

【发布时间】：2019-04-06 18:25:33

【问题描述】：

我正在尝试集中对齐我的响应式嵌入式 youtube 视频，并在页眉和页脚导航之间正确显示它们。目前它不会显示所有 3 个视频，它们也不会正确对齐。要查看整个代码，请访问此链接：my website video page

这是我尝试过的主要视频编码：

.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           
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe   src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe   src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong></center>

【问题讨论】：

也许这会帮助你：***.com/questions/8366957/… 而你没有关闭strong-tag。

我尝试将“display:block”添加到 CSS 代码中，但没有任何改变。您能提出其他建议吗？

【参考方案1】：

您需要为视频容器分配 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           
       src="https://www.youtube.com/embed/iydTzl6adLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe   src="https://www.youtube.com/embed/fjZ5ZLWbu50" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
  <div class="video-container"><iframe   src="https://www.youtube.com/embed/d8JOqV3Ql-w" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
  <p></p>
   </strong>
   
</center>

【讨论】：

尝试了建议的 CSS 代码和一个以 100% 宽度显示的视频（代码底部的视频），但它没有显示视频的整个高度。

使用 height: 100% 代替 height:auto，它会起作用

别担心。我只是想出了一个方法来让它全部工作。

在这种情况下，请自行回答或删除 qour 问题...请不要在 SO 上留下问题