1

当用户单击图像缩略图时，它会触发不透明的模态背景，并且 YouTube 视频播放器位于此之上。

1）当视口缩小时，我将如何使这个 iFrame 流体响应？

2) 即使假设我们可以让#1 工作，我将如何让这些 YouTube 视频在 iPhone/Android 上的默认本地播放器中打开，而不是我希望在 #1 中完成的缩小模式窗口。

目前，模态背景和 YouTube 模态在桌面上完美运行，但随着浏览器窗口的缩小，事情开始向南大约 900 像素并向下移动。目前在 iPhone/Android 上，视频根本无法播放，不确定会发生什么。

HTML

<section class="modal-wrapper valign">
<section class="youtube-modal">
    <button class="close-youtube-modal"></button>
    <iframe src="http://www.youtube.com/v/OnAHIH4p5Vg?version=3&amp;enablejsapi=1&amp;autoplay=1" frameborder="0" allowfullscreen="allowfullscreen" class="youTubeIframe" width="854" height="480"></iframe>
</section>

CSS

section.modal-wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    text-align: center;
    background: rgba(0, 0, 0, .55);
}

section.youtube-modal {
    display: none;
    width: 854px;
    position: relative;
    z-index: 1000;
    background-color: transparent;
}

button.close-youtube-modal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 25px;
    height: 26px;
    background: url(../images/close-youtube.png) no-repeat;
    cursor: pointer;
    outline: none;
    border: none;
}

section.youtube-modal iframe {
    margin-top: 35px;       
}

JS

function youTubeModal() {
    var thumbnail = document.querySelectorAll('.thumbnail-container ul li'),
        modalWrapper = document.querySelector('.modal-wrapper'),
        youTubeModal = document.querySelector('.modal-wrapper .youtube-modal'),
        youTubeIframe = document.querySelector('.youTubeIframe'),
        closeVideo = document.querySelector('.close-youtube-modal'),
        staticVideoContainer = document.querySelector('.staticVideoContainer'),
        videoWidth = 854,
        videoHeight = 480;

    for (var i=0;i<thumbnail.length;i++) {
        thumbnail[i].addEventListener('click', function (e) {
            var data = e.target.getAttribute('data-videoid');
            modalWrapper.style.display = 'block';
            youTubeModal.style.display = 'inline-block';
            youTubeIframe.setAttribute('src', 'http://www.youtube.com/v/' + data + '?version=3&enablejsapi=1&autoplay=1');
            youTubeIframe.setAttribute('width', videoWidth);
            youTubeIframe.setAttribute('height', videoHeight);
        }, false);
    }

    staticVideoContainer.addEventListener('click', function(e) {
        var data = staticVideoContainer.getAttribute('data-videoid');
            modalWrapper.style.display = 'block';
            youTubeModal.style.display = 'inline-block';
            youTubeIframe.setAttribute('src', 'http://www.youtube.com/v/' + data + '?version=3&enablejsapi=1&autoplay=1');
            youTubeIframe.setAttribute('width', videoWidth);
            youTubeIframe.setAttribute('height', videoHeight);
    }, false);

    closeVideo.addEventListener('click', function () {
        youTubeModal.style.display = 'none';
        modalWrapper.style.display = 'none';
        youTubeIframe.setAttribute('src', '');
    }, false);

}

4

1 回答 1

0

为了响应，请遵循以下解决方案：

.iframe-parent {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.iframe-parent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

将“ iframe-parent ”类添加到iframe标签的父 div

于 2019-10-17T03:11:24.330 回答