嵌入一个响应的YouTube iframe来的页面

下面的中心是我的代码，我试图居中的iframe，但它总是会留下！这里是小提琴http://jsfiddle.net/4yL4od8j/嵌入一个响应的YouTube iframe来的页面

.videowrapper { 
text-align : center; 
    float: none; 
    clear: both; 
    width: 100%; 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 25px; 
    height: 0; 
} 
.videowrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
max-width: 700px; 
max-height: 400px; 
}

我的HTML

 <center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>

来源

2014-11-25 Vishnu

的可能的复制[我该如何调整在引导中心的YouTube嵌入式视频]（https://stackoverflow.com/questions/22433616/how-can-i-align -youtube-embedded-video-in-the-the-center-in-bootstrap） – 2017-08-08 18:23:19

为了让你框架中心你需要给你的videowrapper特定width并使marginleft和right为auto。

.videowrapper { 
     float: none; 
     clear: both; 
     width: 700px;<-- Added--> 
     position: relative; 
     padding-bottom: 56.25%; 
     padding-top: 25px; 
     height: 0; 
     margin: 0 auto;<-- Added--> 
     max-width: 100%;<-- Added--> 
    }

Working fiddle

尽管你想使你的帧响应总是使用max-width: 100%您videowrapper。

来源

2014-11-25 12:40:48 Benjamin

这不会使它响应。请检查标题 – Vishnu 2014-11-25 12:42:09

你可以检查我更新的答案。 – Benjamin 2014-11-25 12:43:28

它搞砸了整个页面..检查http://totallyrockingz.com/temp/yt/ – Vishnu 2014-11-25 12:47:02

试试这个：

<div align="center"> 
<div class="videowrapper "><iframe width="560" height="315"   src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div> 
</div>

来源

2014-11-25 12:41:15 Phasmatis

不工作！请在发布前测试 – Vishnu 2014-11-25 12:43:15

iframe元素上的宽度=“560”height =“315”的内联样式肯定会覆盖任何css声明。 – lharby 2014-11-25 12:44:07

我测试过了，似乎对我来说工作得很好。 – Phasmatis 2014-11-25 12:47:41

嵌入一个响应的YouTube iframe来的页面

回答

相关问题