如何使視頻與圖像網格對齊？

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網格。

您必須在head標籤中包含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網格已經可供您使用。使用編輯器將視頻放在一列中，然後在其旁邊添加三列，下面有圖片和文字。另外請注意，您上次使用視頻短代碼的最後一次嘗試是接近的，但實際上在短代碼中丟失了右括號（]）！

這是標記的結果，你可以嘗試：

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

視頻並沒有響應，那麼觀看的前端呈現的簡碼，你可以看到什麼WordPress的轉換視頻簡碼爲標記明智之舉玩家。

爲了使視頻響應，您可以進入定製器>高級> css & js編輯器以將自定義CSS和JS添加到該網站。這是我使用的CSS：

.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; 
    } 

這基本上是讓玩家跨越100％它的面積是內 - 在我們的情況是這樣的COL-MD-3的一個（即我們有4列，具體在自舉中可能有12列）。

保持縱橫比是視頻的人數，你可以打開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(); 
    });