youtube iframe api multiple

by ian_smithz

HTML

<script src="https://www.youtube.com/player_api"></script>
<div class="video-container">
    <div data-id="olBOo_S5AHY"></div>
</div>

<br><br>
<div class="video-container">
    <div data-id="3IXKIVZ9T-U"></div>
</div>
<div class="video-container">
    <div data-id="LAQDcnwwspQ"></div>
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 75%;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

function onYouTubePlayerAPIReady() {
    var players = document.querySelectorAll('.video-container div')
    for (var i = 0; i < players.length; i++) {
        new YT.Player(players[i], {
            playerVars: {
                'autoplay': 0,
                'modestbranding': 1,
            },
            videoId: players[i].dataset.id
        });
    }
}