我正在尝试将YouTube嵌入式视频与我的引导页面中的页面中心对齐。视频的大小始终相同。
我的HTML看起来很简单：
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
我尝试了stackoverflow的不同解决方案（它只针对div而不是视频），而我能想到的最好的解决方案是this fiddle。
我已经尝试了solution1，solution2，solution3，但没有结果。另一个部分成功的解决方案是使用：
width: 50%;
margin: 0 auto;
它在桌面上运行良好，但在iPad或手机上失败（视频部分在屏幕外部）。如何在桌面/平板电脑/手机中正确对中视频？
答案 0 :(得分：10)
需要注意的重要事项/＆＃34; Bootstrap＆＃34;只是一堆CSS规则
<div class="your-centered-div">
<img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>
/* key stuff */
.your-centered-div {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 0; right: 0; /* confuse it i guess */
bottom: 0; left: 0;
margin: auto; /* make em equal */
}
完全正常工作jsFiddle is here。
这些天我主要使用它：
.centered-thing {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
这样......你不需要知道元素的大小 - 而翻译是基于它的大小 - 所以，-50％本身。整齐。
答案 1 :(得分：6)
Youtube使用iframe。 您只需将其设置为：
iframe {
display: block;
margin: 0 auto;
}
答案 2 :(得分：3)
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
答案 3 :(得分：2)
您根本不必将<iframe>放在父div中。您可以使用CSS / 3确切定位youtube iframe：
iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
display: block;
margin: 0 auto;
}
答案 4 :(得分：0)
我将视频的最大宽度设置为100％。在手机上，视频会自动适应屏幕宽度。由于嵌入式视频的宽度仅为560px，我只是在iframe中添加了10％的左边距，然后添加了一个＆＃34; 0＆＃34;返回以获取移动CSS的边距（允许全宽视图）。我不想在每个视频中放置一个div ...
桌面CSS：
iframe {
margin-left: 10%;
}
移动CSS：
iframe {
margin-left: 0;
}
完美适合我的博客（Botanical Amy）。
答案 5 :(得分：0)
使用Bootstrap内置的.center-block类，它将左边距和右边设置为auto：
<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
或使用内置.text-center类，该类设置text-align: center：
<div class="text-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
答案 6 :(得分：0)
<div>
<iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> .
</iframe>
</div>
<script>
function myFunction() {
var wscreen = window.innerWidth;
var hscreen = window.innerHeight;
document.getElementById("myFrame").width = wscreen ;
document.getElementById("myFrame").height = hscreen ;
}
myFunction();
window.addEventListener('resize', function(){ myFunction(); });
</script>
这适用于Vimeo向myFrame
iframe
答案 7 :(得分：0)
使用align =“ middle”制作iframe，并使用style =“ text-aling：center”将其放在段落中：
<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>
答案 8 :(得分：0)
要获得完全响应的IFramed YouTube视频，请尝试以下操作：
<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.blogwidevideo {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.blogwidevideo iframe {
left:10%; //centers for the 80% width - not needed if width is 100%
top:0;
height:80%; //change to 100% if going full width
width:80%;
position:absolute;
}
答案 9 :(得分：-1)
<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>
这似乎有用，这就是你要求的吗？我想你可以花更多时间参与更多的路线，但这看起来很简单。
答案 10 :(得分：-3)
最简单的方法是在之前添加标签，然后打开，然后在关闭后将其关闭。正如其他人所说，HTML5不支持标记，甚至您的ide也将显示错误。我使用的是VS Code，是的，它显示错误，但是如果您检查自己的网站，视频将位于中间。 Youtube仍然可以识别标记：）