ghj

VIDEO INLINE

We are Small Team of Creative People working together

Video Inline
Inline video styles that provides the embeded video covers in two different styles.
Sapid kit

The video style allows you to embed a video using an iframe from service providers such as Youtube, Vimeo etc. Additionally you can use your own cover image and theme-consistent play button to maintain full visual control over the page.


<div class="card card-shadow" data-aos="flip-up" data-aos-duration="1200">
<img class="card-img-top video-img" src="assets/images/ui/video.jpg" alt="Sapid kit">
<div class="embed-responsive hide embed-responsive-16by9" data-animation="animated fadeIn">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TPt4m7i9dRk?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>


$('.video-img').on('click', function() {
$(this).addClass('hide');
$('.embed-responsive').show()
.removeClass('hide');
$("video").each(function () { this.play() });
});

This play button opens the linked video inside a modal. See modals page for more information on how to use modals.


<a href="javascript:void(0)" data-toggle="modal" data-target="#exampleModal" class="btn btn-outline-info">Watch video <span class="btn-devider"><i class="fa fa-play"></i></span></a>
<!-- Modal -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Watch video</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="yt-player">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>