JSFiddle - React, Tailwind, and code Playground

by thornwalker

HTML

<div id="video-container">
    <video autoplay="" loop="" class="fillWidth">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
<br/>
<a id="directions" href="#">Directions</a>

<a id="story" href="#">Story</a>

JavaScript

var directionsVar = '<video autoplay="" loop=""><source src="direction.mp4" type="video/mp4"></video>';

var storyVar = '<video autoplay="" loop=""><source src="story.mp4" type="video/mp4"></video>';

$("#directions").click(function () {
    $("#video-container").empty();
    $("#video-container").append(directionsVar);
});

$("#directions").hover(function () {
    $("#video-container").empty();
    $("#video-container").append(directionsVar);
});

$("#story").click(function () {
    $("#video-container").empty();
    $("#video-container").append(storyVar);
});

$("#story").hover(function () {
    $("#video-container").empty();
    $("#video-container").append(storyVar);
});