Responsive YouTube Modal & Playing Video on Mobile

Question

When a user clicks on an image thumbnail it triggers an opaque modal background and YouTube video player sits on top of this.

1) How would I go about making this iFrame fluid responsive when the viewport is scaled down?

2) Even assuming we can get #1 working, how would I go about getting these YouTube videos to open in the default native player on iPhone/Android rather than the scaled down modal window which I'm hoping to accomplish in #1.

Currently the modal background and YouTube modal work perfectly on Desktop, but things begin to go South around 900px and down as the browser window is scaled in. Currently on iPhone/Android the videos don't play at all, not really sure what happens.

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

for responsiveness, follow this solution:

.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%;
}

added 'iframe-parent' class to the parent div of the iframe tag