YouTube, Vimeo Video Lightbox Popup for Weebly
Weebly offers many elements to embed videos on your site. YouTube and embed code elements are available for free users and hosted HD video player element is only available for pro and higher plan users. But all these options will allow you to embed videos on the page without the possibility of showing it in a popup lightbox. In this article we will explain how to embed YouTube and Vimeo Video in a popup lightbox using jQuery widget.
This widget is referenced from the jQuery YouTube lightbox widget and modified to suit on the Weebly site.
Video Lightbox Popup for Weebly Widget Features
- The widget can be linked to a text or button or an image.
- When user clicks on the link, the video will open in a lightbox popup mode.
- YouTube, Vimeo or any other video source can be linked.
- The popup width and height can be modified.
- The popup can be closed either by clicking the close button or by clicking on the outside overlay area.
- The video popup up is fully responsive and works on all devices.
How to Add the Widget?
Step 1 – Download the Files
The video lightbox widget requires jQuery script, CSS and HTML. Download the zip archive file “Video Lightbox.zip” by clicking on the download button below.
Unzip the archive and extract the following items:
Step 2 – Uploading Files in Weebly
The second step is to upload all the files on your Weebly site. Navigate to “Theme” tab and click on the “Edit HTML / CSS” button. You will be taken to Weebly code editor and navigate to “Assets” section. Upload all the three files and save your changes.
Step 3 – Links for Uploaded Files
The uploaded files will have the following relative links:
You can also use the absolute URLs like below:
Step 4 – Linking Script in Weebly Page
Open the page you want to insert video lightbox widget and navigate to “SEO Settings > Footer Code” section. Paste the following code to link the script file on the page footer:
Step 5 – Linking CSS in Weebly Page
Add the below code under “SEO Settings > Header Code” section to link the CSS file.
<link rel="stylesheet" type="text/css" href="/files/theme/video-popup.css"></link>
Step 6 – Inserting HTML
Drag and drop an embed code element and insert the below HTML code.
<!-- YouTube Popup as Button with Autoplay -->
<a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a>
<!-- YouTube Popup as Button without Autoplay -->
<div class="btn"><a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video without Autoplay as Text Link</a>
<!-- Vimeo Popup as Text Link with Autoplay -->
<a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a>
<!-- Vimeo Popup as Text Link without Autoplay -->
<a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a>
<!-- YouTube Video Linked with Image without Autoplay -->
<a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">
<img src="https://img.webnots.com/2017/03/YouTube-Video-Image.jpg" width="300" height="150"></a>
Step 7 – Customizing the Widget
- Add only the required block of HTML to insert button or text link or image.
- Replace the image URL and video URLs with your own.
- Max width and height of the popup is defined as 680px and 480 px respectively which you can customize in the CSS.