JSFiddle - React, Tailwind, and code Playground

by daraand

HTML

<!--Video One-->
    <video width="960" height="540" controls="0" loop id="vid1" style="display:none;" poster="images/fronts/yolo/teaser-background.jpg">
 <!-- Video's MP4 source-->
        <source src="http://dev.theoryanimation.com/images/fronts/yolo/mov/home.mp4" type="video/mp4" class="img-responsive" id="videomp4">
 <!-- Video's OGV source-->
        <source src="http://dev.theoryanimation.com/images/fronts/yolo/mov/home.ogv" type="video/ogg" class="img-responsive" id="videoogg">Your browser does not support the video tag.</video>

            <!--Video Two (which is the smae as One)-->
    <video width="960" height="540" controls="0" loop id="vid2" style="display:none;" poster="images/fronts/yolo/teaser-background.jpg">
 <!-- Video's MP4 source-->
        <source src="http://dev.theoryanimation.com/images/fronts/yolo/mov/home.mp4" type="video/mp4" class="img-responsive" id="videomp4">
 <!-- Video's OGV source-->
        <source src="http://dev.theoryanimation.com/images/fronts/yolo/mov/home.ogv" type="video/ogg" class="img-responsive" id="videoogg">Your browser does not support the video tag.</video>
        
<!-- Changers-->
<ul>
    <li>
        <img src="http://placehold.it/100x100" id="home">
    </li>
    <li>
        <img src="http://placehold.it/100x100">
    </li>
</ul>
</div>

CSS

img {
    cursor:pointer;
}

JavaScript

$('#home').hover(function () {
    $(.video: visible ).pause().hide();  $('#'+$(this).data('vid1')).show().play()};