JSFiddle - React, Tailwind, and code Playground

by rushijogle

HTML

<script type="text/javascript" src="http://www.richardscarrott.co.uk/app/webroot/assets/javascript/jquery/carousel/demo/jquery.carousel.js"></script>
<div id="my-carousel-2" class="carousel module">
			 <ul>

		    </ul>
		</div>

 <div id="player"></div>

CSS

.carousel ul {
		    position:absolute;
		    overflow:hidden;
		    margin:0;
		    padding:0;
		    list-style:none;
		}

		.no-js .carousel ul {position:static;}

		.carousel .mask {
		    position:relative;
		    overflow:hidden;
		    border:6px solid #444;
		}

		.carousel ul li {
			float:left;
			width:150px;
		    height:150px;
		    color:#fff;
			font-size:8em;
			text-align:center;
			margin:0;
		}

		.carousel .pagination-links {
		    list-style:none;
		    margin:0;
		    padding:0;
		}
		 
		.carousel .pagination-links li {
		    display:inline;
		}

		.carousel .pagination-links li a {
			padding:2px 6px;	
		}

		.carousel .pagination-links li a:hover {text-decoration:none;}

		.carousel .pagination-links li.current a {
			 background:#444;
			 color:#fff;
		}
		 
		.carousel .disabled {
		    color:gray;
		    cursor:default;
		}
		
		/** my carousel 1 **/
		#my-carousel-1 .mask {
			width:150px;
		}

		/** my carousel 2 **/
		#my-carousel-2 .mask {
			width:630px;
		}

		#my-carousel-2 ul li {
			margin:0 78px 0 0;
		}

		/** my carousel 3 **/
		#my-carousel-3 .mask {
			width:450px;
		}

JavaScript

var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/9bw4S5ePsEE6Mtelp3MHiXYLtrmu-TvF?v=2&alt=json&callback=?';
	var videoURL= 'http://www.youtube.com/watch?v=';
		$.getJSON(playListURL, function(data) {
		var list_data="";
			$.each(data.feed.entry, function(i, item) {
			var feedTitle = item.title.$t;
			var feedURL = item.link[1].href;
			var fragments = feedURL.split("/");
			var videoID = fragments[fragments.length - 2];
			var imageID = item.media$group.yt$videoid.$t;
			var thumb = "http://img.youtube.com/vi/"+ imageID +"/default.jpg";
			list_data += '<li><a href= "#" title="'+ feedTitle +'" onClick=show_yt_vid("'+imageID+'");><img src="'+ thumb +'" width="213px" height="141px"/></a></li>';
			});
			$(list_data).appendTo("#my-carousel-2 ul");
			$('#my-carousel-2').carousel({
		    	itemsPerPage: 4,
		    	itemsPerTransition: 4,
		    	speed: 500
		    });
		});
		
		function show_yt_vid(id)
		{
		
		if(player)
			{
				player.loadVideoById(id);
			}
		
			
		}
		
		// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      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', {
          height: '390',
          width: '640',
          videoId: '',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
		 }
	
	  

        function onPlayerReady(event) {
	   alert("player is ready");
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {
	 
        if (event.data == YT.PlayerState.PLAYING && !done) {
        ...