如何在响应式视频库中使不同大小的 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 中的高度和宽度以满足您的需要。