0

こんにちは、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>

4

1 に答える 1

0

何よりもまず、スタイルシートを使用してページのスタイルを設定する方が便利です。

グリッドを作成するには、コンテナ用の CSS ルールと、各子ビデオ コンテナ用の 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 の高さと幅を変更してください。

于 2020-10-08T05:42:08.717 に答える