Pausing YouTube embedded videos
HTML
<iframe width="640" height="360" src="https://www.youtube.com/embed/Fy7FzXLin7o?enablejsapi=1&rel=0&controls=&modestbranding=1&theme=light&showinfo=0&hd=1" id="video_Fy7FzXLin7o" data-behaviour="embed" frameborder="0" allowfullscreen=""></iframe>
<br />
<iframe width="640" height="360" src="https://www.youtube.com/embed/IrTB-iiecqk?enablejsapi=1&rel=0&controls=&modestbranding=1&theme=light&showinfo=0&hd=1" id="video_IrTB-iiecqk" data-behaviour="embed" frameborder="0" allowfullscreen=""></iframe>
<br />
<section class="pause-buttons">
<h1>Pause Buttons</h1>
<a class="btn-contact" href="#">Contact Us</a>
<a class="close-overlay" href="#">Close</a>
<a class="owl-prev" href="#">Previous Slide</a>
<a class="owl-next" href="#">Next Slide</a>
</section>
CSS
iframe {
margin-bottom: 2.6em;
}
iframe + iframe {
margin-bottom: 1.4em;
}
section.pause-buttons {
width: 80%;
margin: 0 auto 1em auto;
}
section.pause-buttons > h1 {
font-weight: bold;
margin-bottom: 0.35em;
}
section.pause-buttons a {
display: inline-block;
margin-right: 1em;
}
JavaScript
videos = (function() {
var
players = [],
pauseMatchers = ".close-overlay, .owl-next, .owl-prev, a.btn-contact";
var bind = function(e) {
var pauseButtons = $(pauseMatchers);
pauseButtons.each(function(index, el) {
$(el).on("click", function() {
pauseAll();
});
});
};
var push = function(object) {
players.push(object);
};
var pauseAll = function() {
$(players).each(function(index, el) {
el.pauseVideo();
});
};
return {
bind: bind,
push: push,
players: players
};
})();
// Inject YouTube, baby
var youtubePlayer, firstScriptTag, tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
$("[data-behaviour~=embed]").each(function(index, el) {
var player, $el = $(el);
player = new YT.Player($el.attr("id"), {
events: {
"onReady": videos.bind
}
});
videos.push(player);
});
}