JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flixel"></div>

JavaScript

// Setup
  var data = {"phone_mp4": "https://d120jgpkmrtfiu.cloudfront.net/flixel/qtxzb6tz0kyqhuwdi8un.phone.mp4", "geocoordinate": {"latitude": 0.0, "longitude": 0.0}, "private": false, "webm": "https://d120jgpkmrtfiu.cloudfront.net/flixel/qtxzb6tz0kyqhuwdi8un.webm", "mp4": "https://d120jgpkmrtfiu.cloudfront.net/flixel/qtxzb6tz0kyqhuwdi8un.mp4", "duration": 4.3376669999999997, "id": 160615, "badges": [], "cdn_url": "https://d120jgpkmrtfiu.cloudfront.net/", "hash_key": "qtxzb6tz0kyqhuwdi8un", "width": 1920, "comment_count": 2, "graph_player_link": "http://flixels.s3.amazonaws.com/player/flixel-player.swf?videoURL=https://d120jgpkmrtfiu.cloudfront.net/flixel/qtxzb6tz0kyqhuwdi8un.phone.mp4", "thumbnail": "https://d120jgpkmrtfiu.cloudfront.net/flixel/qtxzb6tz0kyqhuwdi8un.thumbnail.jpg", "status": 1, "link": "http://flixel.com/flixel/qtxzb6tz0kyqhuwdi8un/", "user": {"username": "Zivo", "id": 51669, "avatar": "https://flixels.s3.amazonaws.com/avatars/51669.jpg", "realname": ""}, "device": 1, "rotation": 0, "height": 1080, "likes_count": 54, "url": "https://flixels.s3.amazonaws.com/flixel/qtxzb6tz0kyqhuwdi8un.gif", "featured": false, "caption": "#hongkong 17", "date_created": "2013-06-24 17:38:39", "flagged": false, "tablet_mp4": "https://d120jgpkmrtfiu.cloudfront.net/flixel/qtxzb6tz0kyqhuwdi8un.tablet.mp4"};
  var element = document.getElementById('flixel');
  var insertGif = function(data){
     element.innerHTML = '<img src="' + data.url + '">';
  };
  var insertVideo = function(data){
    element.innerHTML = '' +
      '<video autoplay loop class="hidden">' +
        '<source src="' + data.webm + '" type="video/webm">' +
        '<source src="' + data.mp4 + '" type="video/mp4">' +
        '<img src="' + data.url + '" >' +
      '</video>';
  };
    
  // Try Investigating Environment
  try {
      
    var isMobile = !!(function(a){return...