JSFiddle - React, Tailwind, and code Playground

by thornwalker

HTML

<div id="video-container">
    <video autoplay="" loop="" class="fillWidth">
        <source src="http://69.195.124.153/~trickort/wp-content/themes/greychild/images/jackvid06.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="http://69.195.124.153/~trickort/wp-content/themes/greychild/images/jackvid02.mp4" type="video/mp4"></video>';

var storyVar = '<video autoplay="" loop=""><source src="http://69.195.124.153/~trickort/wp-content/themes/greychild/images/jackvid06.mp4" type="video/mp4"></video>';

$("#directions").click(function () {
    //Get rid of that old HTML content
    $("#video-container").empty();

    //Bring in the new content!
    $("#video-container").append(directionsVar);
});

$("#story").click(function () {
    //Get rid of that old HTML content
    $("#video-container").empty();

    //Bring in the new content!
    $("#video-container").append(storyVar);
});