<section class="container">
<img class="background" src="https://raw.githubusercontent.com/NestorPlasencia/img/master/sala.jpg"/>
<video id="video" src="https://raw.githubusercontent.com/NestorPlasencia/img/master/Untitled.mp4"></video>
<img class="control" src="https://raw.githubusercontent.com/NestorPlasencia/img/master/control.png" onclick="play()"/>
</section>
body{
margin: 0;
}
.container {
position: relative;
width: 560px;
height: 400px;
}
.background {
width: 100%;
height: 100%;
}
#video{
position: absolute;
top: 90px;
left: 172px;
width: 230px;
}
.control {
position: absolute;
bottom: 0;
right: 0;
width: 140px;
height: 200px;
transition: all .2s ease-in-out;
transform-origin: 100% 100%;
cursor: pointer;
}
.control:hover {
transform: scale(1.1);
}
var video = document.getElementById("video");
function play(){
video.play();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.