JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://suu.edu/_files/framework/css/suu-custom.css">
<div class="hero-unit">
 <div id="myCarousel" class="carousel slide">
            <!-- Carousel items -->
             <div class="carousel-inner">
                            
                                            
                                                
                   <div class="item active">
                       <a href="http://www.youtube.com/embed/1N5lsZLR0X4">
                           <img src="http://suu.edu/hss/images/homeimg/hssfaculty.jpg"/>
                           </a>
                                                       <div class="carousel-caption">
                                               <h4>HSS Faculty</h4>
                                                                     </div>   
                                   </div>           
                            
                                            
                                                
                   <div class="item">
                        <a href="http://www.youtube.com/embed/0GNtbXCc7qA">
                       <img src="http://suu.edu/hss/images/homeimg/traffickingconf.jpg"/>
                                           </a>
                                                       <div class="carousel-caption">
                                               <h4>Participants in the Human Trafficking Conference</h4>
                                                                      <p>L to R: Kurt Harris, SUU Director of Global Engagement Center; Bishwo Ram Khadka, Director-Maiti Nepal; Anuradha Koirala, Keynote Speaker; Debi Benson; Mike Benson, SUU President; Shobha Gurung, SUU Professor of Sociology</p>
                                              </div>   
                                   </div>           
                            
               ...

JavaScript

$('<style type="text/css"> \
      .item a:hover + div.play-button, div.play-button:hover, div.play-button:focus {\
            opacity: 0.9; \
            filter: alpha(opacity=90); \
      }  \
      div.play-button{ \
        outline: 0; \
        z-index: 2; \
        position: absolute; \
        bottom: 10px; \
        right: 10px; \
        width: 71px; \
        height: 46px; \
        margin: 0; \
        font-size: 30px; \
        font-weight: 100; \
        line-height: 46px; \
        color: #FFFFFF; \
        text-align: center; \
        cursor: pointer; \
        background: #222222; \
        border: 3px solid #FFFFFF; \
        -webkit-border-radius: 15px; \
        -moz-border-radius: 15px; \
        border-radius: 15px; \
        opacity: 0.5; \
        filter: alpha(opacity=50); \
    } \
  </style>').appendTo('head');

$('#myCarousel div.carousel-inner div.item a[href*="youtube.com"]').after('<div class="play-button">&#9658;</div>');

$('#myCarousel div.carousel-inner div.item').on('click', '.play-button, a[href*="youtube.com"]', function(event){
        event.preventDefault();
        $('#myCarousel').carousel('pause').find('.active.item').html(function(index, oldHtml){
            window.saveHtml = oldHtml;
            $(this).html('<iframe width="100%" height="'+$('#myCarousel').height()+'" allowfullscreen="" frameborder="0" src="'+$(this).children('a').attr('href')+'?rel=0&showinfo=0&modestbranding=1&autohide=1&autoplay=1&wmode=opaque"></iframe>'); 
    });
    $('#myCarousel').on('slide', function(){
        $(this).off('slide').carousel({
            interval: 8000
        }).find('.active.item').html(window.saveHtml); 
    });
});

$('#myCarousel').carousel({
            interval: 8000
        });