javascript - レスポンシブ YouTube モーダルとモバイルでの動画再生

Question

ユーザーが画像のサムネイルをクリックすると、不透明なモーダル背景がトリガーされ、YouTube ビデオ プレーヤーがその上に表示されます。

1) ビューポートが縮小されたときに、この iFrame 流体をレスポンシブにするにはどうすればよいですか?

2) #1 が機能すると仮定しても、#1 で達成したいと考えている縮小モーダル ウィンドウではなく、iPhone/Android のデフォルトのネイティブ プレーヤーでこれらの YouTube ビデオを開くにはどうすればよいでしょうか。

現在、モーダル背景と YouTube モーダルはデスクトップで完全に機能しますが、ブラウザー ウィンドウが拡大されると、900px 前後で状況が悪化し始めます。

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);

}