How to Make Different Size Facebook Videos Same Size in Responsive Video Gallery

Question

Hello I need to embed multiple videos onto my website from a facebook page. The problem is all of the videos are a different size.

How do I create a video gallery for videos and make all the videos the same size in the thumbnail and make sure everything is mobile friendly.

I tried using css grid but the videos didn't look right. Im not sure if I should use a library like lightbox or something. I don't want anything too fancy. Just a want a grid of videos that is mobile friendly.

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

Professorval · Answer 1 · 2020-10-08T06:00:40.233

First and foremost, it will be more convenient to style the page using a stylesheet.

To have a grid, you need to have some CSS rules for the container, and others for each child video container.

I have modified your html code:

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

Here's your 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; 
    }
}

Go ahead and modify the heights and widths in the CSS to suit your needs.

Sweet thank you! I will try this out later tonight or tomorrow. Thanks again — ruben005, Oct 09 '20 at 03:32

How to Make Different Size Facebook Videos Same Size in Responsive Video Gallery

1 Answers1