Youtube iframe ajax auto player with poster

youtube-play-video.js

'use strict';

// je déclare mes fonctions
function playTheVideoOnClick(idWrapper, posterClass, idVideoAttr){
	// lancement de la video si clic sur button play sur cover image
	$(idWrapper).click(function(){
		var idVideo = $(this).attr(idVideoAttr);
		var videoIframe = '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + idVideo + '?rel=0&amp;showinfo=0&autoplay=1" frameborder="0" allowfullscreen></iframe>';
		$(this).append(videoIframe);
		$(this).find(posterClass).fadeOut();
	});
}

// on document ready ...
$( document ).ready( function() {
	playTheVideoOnClick('.videoWrapper', '.video-poster', 'data-youtube-id');
});

youtube-template.html

  <div class="row">
      <div class="col-md-8 col-md-offset-2">
          <div class="videoWrapper" id="videoWrapper" data-youtube-id="3ZUA5krsNwU">
              <i aria-hidden="true" class="video-poster" id="video-poster">
                  <i aria-hidden="true" class="video-button-play" id="video-button-play">
                  </i>
              </i>
          </div>
      </div>
  </div>   

youtube-video-player.scss

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	margin: 30px 0;
	height: 0;
	cursor: pointer;
}
.videoWrapper iframe {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-poster {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../media/img/cover-video.png');
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
			
}

.video-button-play {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('../media/img/button-play-video.png');
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: 15%;
	-moz-background-size: 15%;
	background-size: 15%;
}