イメージグリッドでビデオを整列させる方法は？

Question

私はhtmlで画像のグリッドの隣にビデオファイルを整列しようとしています。正しくフィットさせて機能させるための正しいコードの組み合わせを見つけることができないようです。私は、ビデオのプレースホルダーとして画像を使用する場合はここで

が正常に動作し、グリッドである：ここでは

<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="336" height="460"></p> 
<p style="text-align: center;">This is video&nbsp;1</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image&nbsp;1</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image&nbsp;2</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image 3</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image 4</p> 

は、ビデオを追加することで私の試みですが、それが唯一の画像やビデオアイコンとして表示されます。

<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><video src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline_compress2.mp4" width="271" height="600"> 
</video></p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image&nbsp;1</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image&nbsp;2</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image 3</p> 

</div> 
<div style="float: left; margin-right: 5px;"> 
<p class="mod-reset"><img class="middle-img" src="http://studio2d3d.com/wp-content/uploads/2017/06/ShampooAd_Timeline.gif" width="158" height="216"></p> 
<p style="text-align: center;">This is image 4</p> 
</div> 

私が試した：

<div><video src="blah.mp4" width="271" height="600"></video></div> 
<div>[video width="271" height="600" src="blah.mp4"[/video]</div> 

どちらもがそれを行うように見える、私は忘れるんだと思っていますいくつかのタグを付けます。

Answer 1

ブートストラップグリッドを使用してください。

ヘッドタグにbootstrap.cssファイルを含める必要があります。次に、このようなコードを使用して、同じページにビデオとテキスト/画像を配置することができます。

<div class="row"> 
    <div class="col-8">col-8</div> 
    <div class="col-4">col-4</div> 
</div> 

Answer 2

あなたがビデオを埋め込むための特定の高さと幅を設定しているので、それが応答できなくなりますように見えます。あなたのテーマはBoldGridも使用しているように見えるので、Bootstrap 3のグリッドは既に利用可能です。エディタを使ってビデオを1つの列に入れ、その隣に3つの列を追加し、下に画像とテキストを追加します。また、ビデオのショートコードを使用した先の最後の試みは近かったが、実際にはショートコードには閉じ括弧（]）がありませんでした。

<div class="boldgrid-section"> 
    <div class="container"> 
    <div class="row" style="padding-top: 20px; padding-bottom: 20px;"> 
    <div class="col-md-3 col-xs-12 col-sm-12 align-column-center"> 

    [video mp4="http://local.wordpress.dev/wp-content/uploads/2017/05/blurry-night.mp4"][/video] 
    <p class="" style="text-align: center;">This is Video 1</p> 

    </div> 
    <div class="col-md-3 col-sm-12 col-xs-12 align-column-center"> 
    <p style="text-align: center;"><img class="alignnone size-medium wp-image-17892 middle-img" src="http://local.wordpress.dev/wp-content/uploads/2017/07/5971aba9a4a52-300x169.jpeg" alt="" width="158" height="216"></p> 

    <div> 
    <p class="" style="text-align: center;">This is image&nbsp;1</p> 

    </div> 
    <div> 
    <p class="mod-reset">&nbsp;</p> 

    </div> 
    </div> 
    <div class="col-md-3 col-sm-12 col-xs-12 align-column-center"> 
    <p style="text-align: center;"><img class="alignnone size-medium wp-image-17892 middle-img" src="http://local.wordpress.dev/wp-content/uploads/2017/07/5971aba9a4a52-300x169.jpeg" alt="" width="158" height="216"></p> 
    <p class="" style="text-align: center;">This is image 2</p> 

    </div> 
    <div class="col-md-3 col-sm-12 col-xs-12 align-column-center"> 
    <p style="text-align: center;"><img class="alignnone size-medium wp-image-17892 middle-img" src="http://local.wordpress.dev/wp-content/uploads/2017/07/5971aba9a4a52-300x169.jpeg" alt="" width="158" height="216"></p> 
    <p class="" style="text-align: center;">This is image 3</p> 

    </div> 
    </div> 
    </div> 
    </div> 

ビデオが応答はなかったので、フロントエンドにレンダリングショートを見て、あなたはワードプレスのための賢明なマークアップにビデオショートを変換するかを見ることができます。

この

は、あなたが試すことができ、マークアップの結果でありますプレーヤー。

動画を反応的にするには、カスタムのCSSとJSをサイトに追加するために、カスタマイズ>詳細> css & jsエディタに移動します。我々の場合にはCOL-MD-3の一つだ（つまり、私たちは4列を持っていた -

.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load { 
     width: 100% !important; 
     height: 100% !important; 
    } 
    .mejs-container { 
     padding-top: 56.25%; 
    } 
    .wp-video, video.wp-video-shortcode { 
     max-width: 100% !important; 
    } 
    video.wp-video-shortcode { 
     position: relative; 
    } 
    .mejs-mediaelement { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
    } 
    .mejs-controls { 
     display: none; 
    } 
    .mejs-overlay-play { 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     width: auto !important; 
     height: auto !important; 
    } 

これは、基本的には内部のITの面積の100％にまたがるプレーヤーを取得している：これは私が使用するCSSでしたブートストラップで可能な12列のうちの1つ）。

ビデオは、あなたがJSエディタを開き、このコードを追加することができていたことを縦横比を維持するには、次の

$(function() { 
     $('.mejs-overlay-loading').closest('.mejs-overlay').addClass('load'); 

     var $video = $('div.video video'); 
     var vidWidth = $video.attr('width'); 
     var vidHeight = $video.attr('height'); 

     $(window).resize(function() { 
      var targetWidth = $(this).width(); 
      $('div.video, div.video .mejs-container').css('height', Math.ceil(vidHeight * (targetWidth/vidWidth))); 
     }).resize(); 
    });