Auto Play Video

In this example below you will see how to do a Auto Play Video with some HTML / CSS and Javascript

This awesome code was written by Jussic, you can see more from this user in the personal repository.
You can find the original code on
Copyright Jussic ©


  • HTML
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Auto Play Video</title>


  <div class="container-fluid">
<div style="width: 95%,;">
<div id="player">
<table border="0">
<iframe width="580" height="350" src="" frameborder="0" allowfullscreen></iframe>
   <iframe width="420" height="315"
<script type="text/javascript">// <![CDATA[
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = ""; 
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          width: '98%',
          videoId: 'giBYEBX7IE0',
		  playerVars: {
    	  modestbranding: true,
	      showinfo: false,
	      controls: 1,
          events: {
            'onStateChange': onPlayerStateChange,
			'onReady': loadPlaylist
		function loadPlaylist() {
		playlist: ['R6wellI9I80', 'eyP-DTFsK88', 'B8V7LBYUsTM','uoiU9AzIUyg', '6naed7S3yRQ',  'giBYEBX7IE0', 'b6iG1YG6__M' , 
'3_plLUan5EM',  '3bKs-omv3aE', 'dO6NRhg9QCU', ],
		listType: 'playlist',
        index: '0',
		startSeconds: '0',
		suggestedQuality: 'default',

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {

// 5. The API calls this function when the player's state changes.
      //    The function mutes the player
      var done = false;
      function onPlayerStateChange(event) {
	  function setupVideo() {
// ]]></script>
<br />
  <iframe width="660" height="720" src="" frameborder="0" allowfullscreen></iframe>
<p><a href=""><img class="photo-right" style="margin: 10px 15px; float: right;" src="" alt="" width="30%" /></a></p>
<p style="text-align: left;"><em>Video player is muted. &nbsp;Click the speaker in the player to activate sound.</em></p>
<p style="text-size: 6px;">Studying off-campus in a program or university in another part of the world provides numerous educational and life-changing benefits that go far beyond your coursework. &nbsp;Off-campus programs allow students such as you with the chance to enhance your academic experiences through engaging in independent study, service, and personal development opportunities. &nbsp;You will learn more about cultures, language, and common practices as you meet and interact with people in a new setting.</p>
<p><br /><a href=""><img style="margin: 10px 15px; float: right;" src="" alt="" width="30%" /></a>If you are interested in exploring the opportunities that are&nbsp;<a href="" target="_blank"><span style="color: #666666;">available, and want to&nbsp;</span></a>start the application process, check&nbsp;out Horizons. &nbsp;There, you can get more details of the current programs offered, including application process, financial resources available, and contact information for further details or specific questions pertaining to your application.&nbsp;<br />&nbsp;</p>
<table class="block_center" style="background-color: #001e99;" border="0" frame="box" align="center">
<td style="text-align: center;"><span><span><span id="5d42b7bb-8e88-4ccf-8d34-698e3afd58e5" class="GINGER_SOFTWARE_mark"><span><a class="button" href=";ck="><span>Apply Now</span></a></span></span></span></span></td>
<hr /></div>