Html 如何使视频与图像网格对齐？

我正在尝试将一个视频文件与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>

这是视频1


这是图1


这是图2


这是图3


这是图4

下面是我添加视频的尝试，但它仅显示为图像或视频图标：

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

这是图1


这是图2


这是图3


这是图4

我试过：

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

[video width=“271”height=“600”src=“blah.mp4”[/video]

---

这两种方法似乎都不行，我想我忘记了一些标记。

尝试使用引导网格

您必须在head标记中包含bootstrap.css文件。然后您可以使用类似这样的代码在同一页面中排列视频和文本/图像

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

col-8
col-4

看起来您正在为嵌入的视频设置特定的高度和宽度，因此它不会响应。您的主题似乎也使用了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>

这基本上是让播放器跨越其内部100%的区域-在我们的例子中，这是col-md-3中的一个（即引导中可能有12列，我们有4列）

要保持视频的纵横比，可以打开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();
    });

你的确切意思是什么？你能指出问题出在哪里吗？

    $( 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();
    });