如何在响应式视图中居中并制作全宽度的youtube iframe？

Question

我的网站上有一些iframe youtube视频。在响应视图中，它们不是居中而不是全宽。

你可以在那里看到它： http://spitzpomeranian.com/fr

以下是我的问题的截图

http://prntscr.com/bxn4pe

我尝试在jconsole中编辑css代码，但我找不到解决方案。

是否有专家可以告诉我如何居中并使视频全宽？

Answer 1

您可以在css中覆盖iframe的宽度

iframe{ /*use class or id for the iframe*/
width:100%!important;
height:auto!important;
}

在你的情况下，还有一些其他div需要100％宽度

.resp_video{
width:100%;
}
.wrap_video{
width:100%; /*adjust the margin to make the div fit inside the page without horizontal scrollbar*/
}

您在响应式@media查询

中使用上述代码

Answer 2

见Fluid Width YouTube Videos
此解决方案使用jquery

Answer 3

我认为，一旦您关闭视频，您可以使用媒体查询将宽度设置为100％。