How to play video in a modal with Venobox

Published on 04/14/2021
Help Article Plugins
DSC_2753_web-2.jpg
Jason Hoover
Leiout Developer
katy-120.jpg
Katy Wellington
UX/UI Designer
venobox-modal.PNG

Description

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. 

  1. Download the venobox plugin and upload the venobox js and css files to your uploads.
      venobox.min.js
      venobox.min.css

  2. Initialize Venobox in your initialize script.
      $('.venobox').venobox(); 

  3. Add a button to your page
    Add the youtube hyperlink the normal way you'd link a button. Next we'll add classes.

  4. Add Classes and data attributes
    Make sure it's consistent - either add them all to the inner or the outer nodes.
    Classes:
        .venobox
    Data-attributes:
        data-autoplay: true
      data-vbtype: video
JS
CSS/SASS

If you want to add some style to your button, use this css. Add the following classes to your button
btn btn-primary btn-md play-btn

No articles available