JSFiddle - React, Tailwind, and code Playground
by Scott Kaye
HTML
<div class="framed-video">
<video autoplay loop src="https://www.meridiancu.ca/personal-banking/sbob/img/Feature_5_Video.mp4"></video>
</div>
SCSS
.framed-video {
width: 60vw;
background: url(https://www.meridiancu.ca/personal-banking/sbob/img/device_browser.png) no-repeat;
background-size: 100%;
> video {
margin-top: 7.4%;
margin-left: 3.3%;
margin-bottom: 5%; // Ensure the shadow from the image gets rendered
width: 93.3%;
}
}