Question

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

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

2）即使我们可以让＃1正常工作，我如何才能在iPhone / Android上的默认本机播放器中打开这些YouTube视频，而不是我希望在＃中完成的按比例缩小的模式窗口1。

目前，模式背景和YouTube模式完美地在桌面上工作，但是当浏览器窗口缩小时，事情开始向南移动900px左右。目前在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);

}

Answer 1

有关响应性，请遵循以下解决方案：

.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 标签的 parent div

响应式YouTube Modal＆amp;在手机上播放视频

1 个答案: