Opening a video in a modal has a lot of advantages. In this tutorial we'll learn how to do so using the venobox plugin.
venobox.min.js venobox.min.css $('.venobox').venobox();
.venobox
Data-attributes:data-autoplay: true data-vbtype: videox
$('.venobox').venobox();If you want to add some style to your button, use this css. Add the following classes to your buttonbtn btn-primary btn-md play-btn
x
.video-box { background-size: cover; min-height: 500px;}.play-btn { width: 94px; height: 94px; background: radial-gradient($theme1 50%, rgba(255, 88, 33, 0.4) 52%); border-radius: 50%; display: block; position: absolute; left: calc(50% - 47px); top: calc(50% - 47px); overflow: hidden; &:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 100; transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } &:before { content: ''; position: absolute; width: 120px; height: 120px; animation-delay: 0s; animation-delay: 0s; animation: pulsate-btn 2s; animation: pulsate-btn 2s; animation-direction: forwards; animation-direction: forwards; animation-iteration-count: infinite; animation-iteration-count: infinite; animation-timing-function: steps; animation-timing-function: steps; opacity: 1; border-radius: 50% !important; border: 5px solid rgba(255, 88, 33, 0.7); top: -15%; left: -15%; background: rgba(198, 16, 0, 0); }}