在 phone 上观看时，嵌入的 Youtube 视频会浮动到右侧

Question

我正在制作一个响应式网站，上面有一些 Youtube 视频。当我以 > 479 像素的分辨率查看我的网站时，视频停留在中心，但当我以 phone 屏幕分辨率查看或当我将浏览器缩小到 < 480 像素时，视频一直浮动到右侧。现在我使用 text-align: center 来居中视频。

这是我的代码：

 
 .youtube{
 text-align: center;
   
 }

<p class="youtube">
   <iframe width="560" height="340" src="https://www.youtube.com/embed/Ubl3r5mGRtg" frameborder="0" allowfullscreen></iframe></br>

   <iframe width="560" height="340" src="https://www.youtube.com/embed/xgr38LWUf7w" frameborder="0" allowfullscreen></iframe></br>
    <iframe width="560" height="340" src="https://www.youtube.com/embed/ylT54zdmGCk" frameborder="0" allowfullscreen></iframe>
   </p>

Answer 1

您可以添加到您的css：

iframe { max-width: 100%; }

也许可以通过一些媒体查询来修复高度。

在 phone 上观看时，嵌入的 Youtube 视频会浮动到右侧

Embedded Youtube videos float to the right when viewed on phone

html

css

youtube

center

alignment