Chargement et gestion d'une vidéo YouTube

On charge les vidéos embed via iframe YouTube au clic uniquement. Une fois une vidéo en lecture, on la met sur pause si une autre lecture de vidéo est enclenchée.

by oilvier

HTML

<div class="video" data-youtube="container">
    <img src="//img.youtube.com/vi/ScMzIvxBSi4/maxresdefault.jpg" alt="" />
    <iframe width="560" height="315" data-src="https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&amp;modestbranding=1&amp;showinfo=0&amp;autoplay=1&amp;enablejsapi=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>

<div class="video" data-youtube="container">
    <img src="//img.youtube.com/vi/ScMzIvxBSi4/maxresdefault.jpg" alt="" />
    <iframe width="560" height="315" data-src="https://www.youtube-nocookie.com/embed/ScMzIvxBSi4?rel=0&amp;modestbranding=1&amp;showinfo=0&amp;autoplay=1&amp;enablejsapi=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>

SCSS

.video {position: relative; cursor:pointer;
			&:before,
			&:after {content:""; position: absolute; top:50%; left:50%; transition:all 0.3s ease-out; z-index:1; transform:translate(-50%,-50%);}
			&:before {width:1em; height:1em; background-color:red; font-size:80px; transform:translate(-55%, -50%);}
			&:after {border:0 solid transparent; border-width:20px 0 20px 40px; border-left-color:firebrick; width:0; height:0;}

			&:hover {
				&:after {border-left-color:white;}
			}

			& > img {position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.3s ease-out;}

			iframe {visibility:hidden;}

			&.is-playing {
				&:before,
				&:after,
				& > img {opacity:0; visibility:hidden;}
				iframe {visibility:visible;}
			}
	}

JavaScript

if ($('[data-youtube=container]').length) {
    var videoCover = $('[data-youtube=container]');
    var videoPlayer = videoCover.find('iframe');

    $(videoCover).on('click', function() {
        var thisVideoCover = $(this),
            thisVideoPlayer = thisVideoCover.find('iframe'),
            thisVideoUrl = thisVideoPlayer.attr("data-src");

        /**
         * On met en pause les vidéos qui sont déjà en lecture	
         * via `each` qui parcourt toutes les vidéos à disposition 				 
         */
        videoPlayer.each(function(i) {
            /**
             * On cible l'élément en question via `[i]` et on lui passe la fonction de pause en argument 
             * https://developers.google.com/youtube/iframe_api_reference?hl=fr#Playback_controls
             */
            videoPlayer[i].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
        });

        thisVideoCover.addClass('is-playing');
        if (!thisVideoPlayer.attr('src')) {
            thisVideoPlayer.attr("src", thisVideoUrl);
        }
    });

}