<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2>YouTube</h2> <div class="video-component jsVideoComponent"> <div class="video-component__poster jsVideoPoster" style="background-image: url(https://img.youtube.com/vi/4IP_E7efGWE/0.jpg)"> <button class="video-component__btn jsVideoBtn" type="button"></button> </div> <div class="video-component__video jsVideo" data-type="youtube" data-video-id="4IP_E7efGWE"></div> </div>

// plyr.css .video-component { position: relative; height: 300px; overflow: hidden; &:not(:last-child) { margin-bottom: 36px; } .plyr { display: none; } .plyr--ready { position: absolute; } .grid__col & { height: auto; padding-top: 56.25%; } } .video-component--short { &, .grid__col & { height: 200px; padding-top: 0; } } .video-component__poster { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: norepeat; background-size: cover; } .video-component__btn { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; transform: translateX(-50%) translateY(-50%); border: 0; border-radius: 50%; background-color: #ffffff; &:after { position: absolute; top: 50%; left: 50%; margin-left: 5px; transform: translateX(-50%) translateY(-50%); border-width: 25px 0 25px 43.3px; border-style: solid; border-color: transparent transparent transparent #ff9900; content: ""; } &:focus, &:hover { outline: 0; background-color: #ff9900; cursor: pointer; &:after { border-left-color: #ffffff; } } .grid__col--6 &, .grid__col--4 &, .grid__col--3 & { width: 80px; height: 80px; &:after { border-width: 16.7px 0 16.7px 28.9px; } } }

// jquery // plyr.js jQuery(document).ready(function($) { var $videoComponent = $('.jsVideoComponent'); if ($videoComponent.length) { $videoComponent.each(function() { var $thisComponent = $(this); var $thisVideo = $thisComponent.find('.jsVideo'); }); // control video var video = plyr.setup('.jsVideo'); var $button = $('.jsVideoBtn'); $('.plyr').removeAttr('tabindex'); // for tabbing $button.on('click', function() { $('.plyr').show(); video[0].pause(); video[0].toggleFullscreen(); video[0].play(); $(this).parent('.jsVideoPoster').siblings('.plyr').attr('tabindex', 0); }); video[0].on('exitfullscreen', function() { $('.plyr').hide(); video[0].stop(); $('.plyr').removeAttr('tabindex'); }); } });