JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<div class="novideo"></div>
                    
<video autoplay="autoplay" muted="muted" poster="https://www.paypalobjects.com/webstatic/mktg/wright/videos/request-money.jpg">
<source src="https://www.paypalobjects.com/webstatic/mktg/wright/videos/request-money.mp4" type="video/mp4">
<source src="https://www.paypalobjects.com/webstatic/mktg/wright/videos/request-money.webm" type="video/webm">
</video>

CSS

div.novideo {
    background-image: url("https://www.paypalobjects.com/webstatic/mktg/wright/videos/request-money.jpg");
}

html.video video, div.novideo {
    display:block;
    width:500px;
    height:280px;
}

video, html.video div.novideo {
    display:none;    
}