Video Inline

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.

• HTML
• JS

                                                        
<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="wrappixel 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>