JSFiddle - React, Tailwind, and code Playground

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" class="thumb" id="thumb1" data-videoid="vid1"/>
    </li>
    <li>
        <img src="http://placehold.it/100x100" class="thumb" id="thumb2" data-videoid="vid2"/>
    </li>
</ul>

CSS

img {
    cursor:pointer;
}

JavaScript

$('.thumb').hover(function () {
    var currently_playing = $('video:visible');
    if(currently_playing.length){
        currently_playing.hide();
        currently_playing[0].pause();
    }  
    $('#'+$(this).data('videoid')).show()[0].play()
});