CSS 如何在引导程序中将 YouTube 嵌入视频对齐到中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22433616/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I align YouTube embedded video in the center in bootstrap
提问by Salvador Dali
I am trying to align YouTube embedded video in the center of the page in my bootstrap page. The size of the video is always the same.
我正在尝试将 YouTube 嵌入的视频对齐到我的引导程序页面的页面中心。视频的大小始终相同。
My html looks really simple:
我的 html 看起来很简单：
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
I tried different solutions from stackoverflow (which addressed just centering a div, not a video) and the best I was able to came up with was this fiddle.
我尝试了来自 stackoverflow 的不同解决方案（它只解决了使 div 居中，而不是视频的问题），我能想到的最好的解决方案是这个 fiddle。
I already tried solution1, solution2, solution3but with no result. Another partially successful solution was to use:
我已经尝试了solution1、solution2、solution3但没有结果。另一个部分成功的解决方案是使用：
width: 50%;
margin: 0 auto;
It worked nicely on desktop, but failed on iPad or a phone (the video went partially outside of a screen). How is it possible to center the video properly in desktop/tablet/phone?
它在桌面上运行良好，但在 iPad 或手机上失败（视频部分在屏幕之外）。如何在台式机/平板电脑/手机中正确地将视频居中？
采纳答案by sheriffderek
An important thing to note / "Bootstrap" is just a bunch of CSS rules
需要注意的重要事项/“Bootstrap”只是一堆 CSS 规则
HTML
HTML
<div class="your-centered-div">
<img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>
CSS
CSS
/* 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 */
}
Fully working jsFiddle is here.
完全工作的jsFiddle 在这里。
EDIT
编辑
I mostly use this these days:
这些天我主要使用这个：
straight CSS
直接 CSS
.centered-thing {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
if your use stylus/mixins ( you should... it's the best )
如果你使用手写笔/mixins（你应该......这是最好的）
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
This way... you don't need to know the size of the element - and the translate is based of it's size - So, -50% of itself. Neat.
这样......你不需要知道元素的大小 - 翻译是基于它的大小 - 所以，-50％。整洁的。
回答by ToTech
Youtube uses iframe. You can simply set it to:
Youtube 使用 iframe。您可以简单地将其设置为：
iframe {
display: block;
margin: 0 auto;
}
回答by Miloud Eloumri
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
回答by T.Todua
You dont have to put <iframe>in a parent div at all. You can target exactly youtube iframewith CSS/3:
您根本不必放入<iframe>父 div。您可以iframe使用 CSS/3精确定位 youtube ：
iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
display: block;
margin: 0 auto;
}
回答by user9734177
<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>
this works on Vimeo adding an id myFrameto the iframe
这个作品在Vimeo添加一个idmyFrame为iframe
回答by Boris Gafurov
make iframe with align="middle" and put it in paragraph with style="text-aling:center":
使用 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>
回答by Stephen Kaufman
For a fully responsive IFramed YouTube video, try this:
要获得完全响应的 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;
}
回答by BotanicalAmy
I set the max width for my video to be 100%. On phones the video automatically fits the width of the screen. Since the embedded video is only 560px wide, I just added a 10% left-margin to the iframe, and put a "0" back in for the margin for the mobile CSS (to allow the full width view). I did't want to bother putting a div around every video...
我将视频的最大宽度设置为 100%。在手机上，视频会自动适应屏幕的宽度。由于嵌入的视频只有 560 像素宽，我只是在 iframe 中添加了 10% 的左边距，并在移动 CSS 的边距中放了一个“0”（以允许全宽视图）。我不想费心在每个视频周围放置一个 div...
Desktop CSS:
桌面 CSS：
iframe {
margin-left: 10%;
}Mobile CSS:
移动 CSS：
iframe {
margin-left: 0;
}Worked perfect for my blog (Botanical Amy).
非常适合我的博客 (Botanical Amy)。
回答by Bruno Peres
Using Bootstrap's built in .center-blockclass, which sets margin left and right to auto:
使用 Bootstrap 的内置.center-block类，它将左右边距设置为auto：
<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
Or using the built in .text-centerclass, which sets text-align: center:
或者使用内置.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>
回答by Rickles
<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>
It seems to work, is this all you were asking for? I guess you could go about taking longer more involved routes, but this seemed simple enough.
它似乎有效，这就是您要的全部吗？我想你可以走更长更复杂的路线，但这似乎很简单。
