Остановить видео (пауза/воспроизведение) | YouTube

Если iframe задать display: none; то в Хроме видео всё равно будет "звучать": jsfiddle.net

Как же быть при закрытии модального окна или переключении таб-вкладок? В справке Ютуба есть указания, но без css-tricks.com с его практическим примером мне было бы не разобраться. Итак, рабочий вариант:

<iframe src="//www.youtube.com/embed/JMJXvsCLu6s?rel=0&enablejsapi=1" frameborder="0" allowfullscreen id="Youtube"></iframe>
<div id="playYoutube">воспроизведение</div>
<div id="pauseYoutube">пауза</div>

<script src="//www.youtube.com/player_api"></script>
<script>
function onYouTubePlayerAPIReady() {
  player = new YT.Player('Youtube', {
    events: {'onReady': onPlayerReady}
  });
}
function onPlayerReady(event) {
  document.getElementById("playYoutube").addEventListener("click", function() {player.playVideo();});
  document.getElementById("pauseYoutube").addEventListener("click", function() {player.pauseVideo();});
}
</script>

Или так:

<div id="play"></div>
<div id="playYoutube1">воспроизведение</div>
<div id="pauseYoutube1">пауза</div>

<script src="//www.youtube.com/player_api"></script>
<script>
var play;
function onYouTubePlayerAPIReady() {
    play = new YT.Player('play', {videoId: 'JMJXvsCLu6s',});
    document.getElementById('playYoutube1').onclick = function() {play.playVideo();};
    document.getElementById('pauseYoutube1').onclick = function() {play.pauseVideo();};
}
</script>