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将视频短代码转换为播放器的标记。

要使视频响应，您可以进入自定义程序＆gt;高级＆gt; css＆amp; 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之一（即我们在引导程序中可能的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();
    });

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

2 个答案: