Question

我有规范使用amp-html加载带有视频的模态窗口。

我们正在尝试在模态窗口中使用amp-lightbox和amp-video来实现这一目标。但是，视频对模式窗口的大小没有响应（我认为这是加载页面时灯箱上初始display:none的大小。）

我有以下amp-html;

<a class="travel-results-result-link block relative" on="tap:video-1">
    <amp-img class="block rounded" width="346" height="200" noloading="" src="/images/video/image01.jpg"></amp-img>
</a>

//...

<amp-lightbox id="video-1" layout="nodisplay">
    <div class="lightbox"
         on="tap:video-1.close"
         role="button"
         tabindex="0">
            <div class="modal-body">
                <amp-video controls
                           width="320" height="240"
                           layout="responsive"
                           poster="images/video/image01.jpg">
                           <source src="videos/gail-video-1.mp4" type="video/mp4" />
                           <div fallback>
                               <p>This browser does not support the video element.</p>
                           </div>
                </amp-video>
            </div>
     </div>
</amp-lightbox>

我的模态主体的css很简单；

    .modal-body {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 90%;
        margin-top: 75px;
        height: calc(100% - 200px);
    }

当我单击以加载模态时，预加载的图像和视频都加载到模态主体div的边界之外？有人可以建议解决这个问题的方法吗？

在amp-lightbox中使用amp-video

0 个答案: