JSFiddle - React, Tailwind, and code Playground

by yasemin CerrahoÄźlu

HTML

<script src="http://vjs.zencdn.net/7.0/video.min.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/7.0/video-js.min.css">
<div id="container">
   <div>
    <button class="button">Click me to fullscreen the iframe</button>
  </div>
  <div class="info">You can check keydown event listener when the browser are in fullscreen and press F11 and ESC by console log on developer tools</div <div class="error"></div>
</div>

      
        <div class="vd-container">
            <div class="overlay"></div>
            <div class="vd-prev">
            </div>

CSS

html,
        body {
            padding: 0px;
            margin: 0px;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
        }

        a,
        a:hover,
        a:focus {
            color: #333;
            text-decoration: none;
        }

        .vd-container {
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        video,
        video-js,
        .vd-player {
            width: 100%;
        }

        .overlay {
            position: fixed;
            background: rgba(0, 0, 0, 0.7);
            z-index: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

        .player-container {
            min-height: 100vh;
        }

        .vd-player {
            margin: auto
        }
        .publisher-info{margin: 20px auto}
        .publisher-info img {
            border-radius: 100%;
            float: left;
            margin-right: 10px
        }

        .publisher-info span {
            display: block;
        }

        .publisher-info span.name {
            font-weight: bold;
            margin: 10px auto
        }

        .publisher-info span.desc {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

JavaScript

var elements = 8;
            for (var i = 0; i < elements; i++) {
                var contain = document.createElement("div");
                var vg = document.createElement("video-js");
                contain.className = "player-container";
                contain.innerHTML = '<div><a href="#"><div class="publisher-info"><img src="https://via.placeholder.com/70"/><span class="name">Publisher Name</span><span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum interdum imperdiet. In finibus finibus libero, eu porta magna lacinia ultrices. Cras quis urna id sem convallis finibus. Morbi elit orci, auctor nec quam ac, tempus porttitor felis. Vivamus at massa rhoncus, semper lectus a, varius dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac dictum massa. Etiam rhoncus ante nibh, non porta metus pellentesque tincidunt. Morbi nec erat nibh. Vestibulum ultricies, neque sed condimentum scelerisque, diam dui accumsan purus, non venenatis lacus purus vitae tortor. In hac habitasse platea dictumst.</span></div></a></div>';
                document.getElementsByClassName("vd-prev")[0].appendChild(contain);
                vg.setAttribute("id", "player-" + i);
                vg.className = "vd-player video-js vjs-default-skin vjs-big-play-centered";
                document.getElementsByClassName("player-container")[i].appendChild(vg);
                var container = document.getElementById(vg.id);
                var myPlayer = this,
                    isAdPlaying = false;
                var player = videojs(container, {
                    controls: true,
                    autoplay: true,
                    muted: true,
                    sources: [{
                        src: '//cdn.videodistribution.com/videos/201808/37dff08ff17e45fca56fb90684cb794d_360.mp4?t=1541070469494',
                        type: 'video/mp4'
                    }],
                    poster:...