<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <figure id="fashion"> <video controls> <source src="http://webmx.me/assets/video/explode.mp4"> <source src="http://webmx.me/assets/video/explode.webm"> </video> <div id="vid-cover"></div> <figcaption>.<span>.</span></figcaption> </figure> <button id="play-button">Play</button> </div> </div>

@keyframes overlay { 30% { left: 0; width: 50%; } 50% { background: #00f; } 80% { left: 80%; width: 20%; } 100% { left: 60%; width: 40%; background: #00f; } } figure#fashion { display: inline-block; position: relative; font-size: 0; margin: 0; } figure#fashion video { width: 100%; } figure#fashion div { width: 100%; height: 100%; background: #f00; background-image:url(//webmx.me/assets/underwater.jpg); position: absolute; top: 0; mix-blend-mode: multiply multiply; left: 0; } video.playing ~ div#vid-cover { animation: overlay 10s forwards; } figure#fashion video.playing ~ figcaption { opacity: 1; } figure#fashion figcaption { font-size: 50px; font-family: Avenir, sans-serif; color: white; position: absolute; width: 40%; right: 0; top: 30%; text-transform: uppercase; text-align: center; opacity: 0; transition: 3s 9s opacity; } figure#fashion figcaption span { font-size: 40px; text-transform: lowercase; display: block; }

var playbutton = document.getElementById("play-button"); var fashion = document.querySelector("#fashion video"); fashion.removeAttribute("controls"); playbutton.addEventListener("click", function() { fashion.play(); fashion.classList.add("playing"); })