используя усилитель-видео внутри усилителя-лайтбокса - PullRequest
Новая
       20

используя усилитель-видео внутри усилителя-лайтбокса

1 голос
/ 30 мая 2019

У меня есть спецификация load, загружающая модальное окно с видео, используя 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);
    }

Когда я нажимаю, чтобы загрузить модальное изображение, и изображение с предзагрузкой, и видео загружаются за пределы границ тела модального тела? Кто-нибудь может предложить способ обойти это?

...