JSFiddle - React, Tailwind, and code Playground

by rossmartin

HTML

<div class="bg1" id="videos">
  <div id="overlay"></div>
</div>

JavaScript

var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
var videos = document.getElementById('videos');

if(!isMobile) {
    // User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
    videos.innerHTML += '<video autoplay loop class="fillWidth">' +
    '<source src="video/videonamehere.mp4" type="video/mp4"/>' +
    '<source src="video/videonamehere.ogg" type="video/ogg"/>' +
    '<source src="video/videonamehere.webm" type="video/webm"/>' +
    '</video>';
} else {
    videos.innerHTML += '<img src="/images/fallback.jpg" title="Your browser does not support the <video> tag">';
}