Nation Library - BasicYouTubePlayer example

Shows how to create a YouTube player without custom controls

by NationStudio

HTML

<script src="https://techdocs.wearenation.co.uk/nation/Utils.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/EventDispatcher.js"></script>
<script src="https://techdocs.wearenation.co.uk/nation/video/BasicYouTubePlayer.js"></script>
<div class="js-video-player" data-video="https://www.youtube.com/watch?v=_czSX4vL8HE">
  <div class="js-player">
    
  </div>
</div>

CSS

.js-video-player {
  width: 400px;
  height: 230px;
  background: #000;
}

.js-player {
  
}

JavaScript

// To automatically initiate a video, 
// use the attribute 'data-video' for youTube video URL
var element = document.querySelector(".js-video-player");

// Set options to use the stock YouTube controls
var options = {
  controls: true,
  mute: true
};

// Create the player
var player = new NATION.video.BasicYouTubePlayer(element, options);