Youtube Responsive Embed

HTML

<div id='wrap-player'>
    <div class="video-container">
        <div id="player"></div>
    </div> 
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    right: 0;
    left: 0;
}

#wrap-player {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

JavaScript

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        playerVars: {

            enablejsapi: 1,
            disablekb: 1,
            showinfo: 0,
            controls: 0,
            fs: 0,
            
        },
        height: '390',
        width: '640',
        videoId: '54yIMKjG048',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}