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.
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.
Demo of Video Lightbox Widget
Click on the button below to check the feel and look of the video popup widget.
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:
If that doesn’t work, right click on the uploaded file and copy the complete Weebly URL. It should look like below:
Remember to use the correct URL in the following sections. If you are in doubt, paste the complete URL in browser and check you can view the content.
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
Go back to the content area of the page after inserting script and CSS. 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.
- We recommend you to use the video popup with no autoplay option to offer better user experience. Also ensure to describe clearly that clicking on the link will open a popup.
- Blocking popups in browsers generally blocks the popup that opens in a new window. This video popup will work even the user blocked popup in browser.
- This widget is referenced from the jQuery YouTube lightbox widget and modified to suit on the Weebly site. You can also use it on any other platforms.
- You can’t use this with Weebly Pro HD video player element as you will not get uploaded video URL when using that element. You can use this widget, as long as you have the URL of a video.