如何在引导程序的中心对齐 YouTube 嵌入视频

Posted 2023-02-24

【中文标题】如何在引导程序的中心对齐 YouTube 嵌入视频

【英文标题】：How can I align YouTube embedded video in the center in bootstrap

【发布时间】：2014-04-21 10:24:09

【问题描述】：

我正在尝试在我的引导页面的页面中心对齐 YouTube 嵌入视频。视频的大小始终相同。

我的 html 看起来很简单：

<div class="video">
    <iframe   src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

我尝试了来自 *** 的不同解决方案（它只解决了使 div 居中的问题，而不是视频），我能想到的最好的解决方案是 this fiddle。

我已经尝试过solution1、solution2、solution3，但没有结果。另一个部分成功的解决方案是使用：

width: 50%;
margin: 0 auto; 

它在台式机上运行良好，但在 iPad 或手机上却失败了（视频部分超出了屏幕）。如何在桌面/平板电脑/手机中正确居中视频？

【问题讨论】：

你只是想用 CSS 对齐屏幕中心的 div，对吧？是视频还是您正在使用与您的问题中未建议的相关的引导程序？

@sheriffderek 我想将 youtube 视频居中对齐。我看到了如何对齐 div，但是当我尝试使用该解决方案时，我无法实现任何目标。 Bootstrap 可能是相关的，因为它本身创建了很多 css 样式，因此可能有一种方法可以使用其中一种样式。

你在用 fitvids.js 吗？

@sheriffderek 不，甚至没有听说过。

【参考方案1】：

需要注意的重要一点/“Bootstrap”只是一堆 CSS 规则

a fiddle

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315"  />
</div>

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 */

完全正常工作jsFiddle is here。

编辑

这些天我主要使用这个：

纯 CSS

.centered-thing 
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

如果你使用手写笔/mixins（你应该......这是最好的）

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

这样...你不需要知道元素的大小 - 翻译是基于它的大小 - 所以，它本身的 -50%。整洁。

【讨论】：

这是一个带有视频的视频：jsfiddle.net/sheriffderek/gLR5s/3 --- 如果您想要响应更快，您应该查看 fitvids 来处理视频比例。希望这会有所帮助，但我想有很多引导样式可能会搞砸。

谢谢。这是我之前的一大进步。问题是我不需要它垂直居中并且上一个和下一个文本隐藏在视频后面。例如 jsfiddle.net/gLR5s/5 。再次感谢您调查我的问题。

这让日志变得更容易。 Boostrap 有一些愚蠢的类，叫做center-block-element 或其他东西——但它只是左右边距自动，可能浮动：无；什么的。

酷，谢谢。这在每台设备上都能完美运行。

注意： 在纯 css 版本中，margin:auto后面缺少分号 (;) >

【参考方案2】：

<center><div class="video">
<iframe   src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>

它似乎有效，这就是你所要求的吗？我想你可以走更长更复杂的路线，但这似乎很简单。

【讨论】：

HTML5 不支持<center> 标签。改用 CSS。

【参考方案3】：

我将视频的最大宽度设置为 100%。在手机上，视频会自动适应屏幕的宽度。由于嵌入的视频只有 560 像素宽，我只是在 iframe 中添加了 10% 的左边距，并在移动 CSS 的边距中放回“0”（以允许全宽度视图）。我不想费心在每个视频周围放置一个 div...

桌面 CSS：

iframe 
		margin-left: 10%;
	

移动 CSS：

iframe 
		margin-left: 0;
	

非常适合我的博客 (Botanical Amy)。

【参考方案4】：

使用Bootstrap内置的.center-block类，将左右边距设置为auto：

<iframe class="center-block"   src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

或者使用内置的.text-center 类，它设置text-align: center：

<div class="text-center">
  <iframe   src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

【参考方案5】：

Youtube 使用 iframe。 您可以简单地将其设置为：

iframe 
   display: block;
   margin: 0 auto;

【讨论】：

如果你能在你的答案周围加上一些上下文，例如为什么它比其他方法更受青睐，它为什么能解决问题等，那将会很有帮助。

【参考方案6】：

<iframe style="display: block; margin: auto;"   src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>

【讨论】：

它对我有用。

【参考方案7】：

您根本不必将<iframe> 放在父 div 中。您可以使用 CSS/3 准确定位 youtubeiframe：

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] 
   display: block;
   margin: 0 auto;

【参考方案8】：

<div>
    <iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1"   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，将 ID myFrame 添加到 iframe

【参考方案9】：

使用 align="middle" 制作 iframe 并将其放入带有 style="text-aling:center" 的段落中：

<p style="text-align:center;">
<iframe   align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>

【参考方案10】：

对于完全响应的 IFramed YouTube 视频，试试这个：

<div class="blogwidevideo">
<iframe   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;

【参考方案11】：

最简单的方法是添加标签，在之前，打开标签，然后在关闭之后关闭它。正如其他人所说，HTML5 不支持标签，甚至您的 ide 也会显示错误。我正在使用 VS Code，是的，它显示了一个错误，但是如果您检查您的网站，视频将位于中心。 Youtube 仍然理解这个标签 :)