JSFiddle - React, Tailwind, and code Playground

by Alejandro M

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/5.11.6/video-js.min.css">
<script src="https://vjs.zencdn.net/5.11.6/video.min.js"></script>
<div class="big-video-content">
  <!-- module -->
  <div class="initial-area"></div>
  <div class="video-js-player" data-HD-video="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" data-SD-video="http://vm-netstcdh-cd.northeurope.cloudapp.azure.com/us/~/media/digitalhub/s90/default/s90_gallery_video_sd.mp4" data-ratio="embed-responsive-16by9">
    <video id="6be3726ceba34a68be3516c6f1230b3ett" class="video-js" controls preload="none" poster="img/video-poster.jpg">
      <source src="http://vm-netstcdh-cd.northeurope.cloudapp.azure.com/us/~/media/digitalhub/s90/default/s90_gallery_video_sd.mp4" type="video/mp4" />
    </video>
  </div>
  <!-- end module -->
</div>

CSS

@font-face{font-family:"VolvoIcons";src:url(../../fonts/volvo-icons/volvo-icons.eot);src:url(../../fonts/volvo-icons/volvo-icons.eot?#iefix) format("embedded-opentype"),url(../../fonts/volvo-icons/volvo-icons.woff) format("woff"),url(../../fonts/volvo-icons/volvo-icons.ttf) format("truetype")}@font-face{font-family:"VolvoBroadPro";src:url(../../fonts/volvo-broad/small/VolvoBroadSmallWeb.eot);src:url(../../fonts/volvo-broad/small/VolvoBroadSmallWeb.eot?#iefix) format("embedded-opentype"),url(../../fonts/volvo-broad/small/VolvoBroadSmallWeb.woff) format("woff"),url(../../fonts/volvo-broad/small/VolvoBroadSmallWeb.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:"VolvoBroadPro";src:url(../../fonts/volvo-broad/medium/VolvoBroadMediumWeb.eot);src:url(../../fonts/volvo-broad/medium/VolvoBroadMediumWeb.eot?#iefix) format("embedded-opentype"),url(../../fonts/volvo-broad/medium/VolvoBroadMediumWeb.woff) format("woff"),url(../../fonts/volvo-broad/medium/VolvoBroadMediumWeb.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:"VolvoBroadPro";src:url(../../fonts/volvo-broad/VolvoBroadWeb.eot);src:url(../../fonts/volvo-broad/VolvoBroadWeb.eot?#iefix) format("embedded-opentype"),url(../../fonts/volvo-broad/VolvoBroadWeb.woff) format("woff"),url(../../fonts/volvo-broad/VolvoBroadWeb.ttf) format("truetype");font-weight:normal;font-style:normal}@font-face{font-family:"VolvoSansPro";src:url(../../fonts/volvo-sans-pro/light/VolvoSansWeb-Light.eot);src:url(../../fonts/volvo-sans-pro/light/VolvoSansWeb-Light.eot?#iefix) format("embedded-opentype"),url(../../fonts/volvo-sans-pro/light/VolvoSansWeb-Light.woff) format("woff"),url(../../fonts/volvo-sans-pro/light/VolvoSansWeb-Light.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:"VolvoSansPro";src:url(../../fonts/volvo-sans-pro/medium/VolvoSansWeb-Medium.eot);src:url(../../fonts/volvo-sans-pro/medium/VolvoSansWeb-Medium.eot?#iefix)...

JavaScript

var jQ = jQuery;

$(document).ready(function(){

videojs("6be3726ceba34a68be3516c6f1230b3ett")

});