如何在响应视频库中使不同大小的Facebook视频大小相同

Question

你好，我需要从facebook页面将多个视频嵌入到我的网站上。问题是所有的视频都有不同的尺寸。

我如何为视频创建一个视频库，使所有视频的缩略图大小相同，并确保一切都对移动友好。

我试着使用css网格，但视频看起来不对。我不确定我是否应该使用像灯箱之类的图书馆。我不想要太花哨的东西。只是想要一个移动友好的视频网格。

<div id="video-gallery" class="py-3">
<div class="container">

<!-- VIDEO 1 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F782480191935558%2F&show_text=false&width=560"
width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 2 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F2424821397755658%2F&show_text=false&width=267"
width="267" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 3 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F865814926935417%2F&show_text=false&width=267"
width="267" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 4 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F576394272544152%2F&show_text=false&width=267"
width="267" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 5 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F208047999378783%2F&show_text=false&width=266"
width="266" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 6 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F208047449378838%2F&show_text=false&width=266"
width="266" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- FACEBOOK VIDEOS -->
<!-- ======================== VIDEOS ==================== -->

</div>
</div>

Answer 1

首先，使用样式表对页面进行样式设置会更方便。

要有一个网格，您需要为容器提供一些CSS规则，并为每个子视频容器提供其他规则。

我修改了你的html代码：

<div id="video-gallery" class="py-3">
<div class="container">
<!-- VIDEO 1 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F782480191935558%2F&show_text=false&width=560"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 2 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F2424821397755658%2F&show_text=false&width=267"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 3 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F865814926935417%2F&show_text=false&width=267"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 4 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F576394272544152%2F&show_text=false&width=267"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 5 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F208047999378783%2F&show_text=false&width=266"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>

<!-- VIDEO 6 -->
<div class="facebook-responsive">
<iframe
src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FClearLand.Net%2Fvideos%2F208047449378838%2F&show_text=false&width=266"
style="border:none;overflow:hidden" scrolling="no" frameborder="0"
allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>
</div>
</div>
</div>

这是你的CSS：

/* For Large Displays */
.container{
display: block;
width: 100%;
margin: 0px auto;
}
.facebook-responsive{
display: inline-block;
width: 320px;
height: 480px;
margin: 0px auto;
}
iframe{
width: 100%;
height: 100%;
}
/* Mobile CSS */
@media only screen and (max-width: 768px) {
.container{
display: block;
}
.facebook-responsive{
width: 100%;
height: auto;
margin-top: 10px; 
}
}

继续修改CSS中的高度和宽度以满足您的需求。