Weebly offers many elements to embed videos on your site. YouTube and embed code elements are available for free users. 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
Here are some of the features of the widget:
- You can link the widget to a text or button or an image.
- Video will open in a lightbox popup mode, whenever users click on a link.
- It is possible to link YouTube, Vimeo or any other video source.
- You can customize the width and height of the popup to adjust for your site’s layout.
- Widget has two options to close the popup – 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 Widget in Weebly Site?
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:
- video-popup.js
- video-popup.css
- close.png
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.
Note: If you have lot of files uploaded under assets section then create a new folder named “videolightbox” and upload the files inside the folder.
Step 3 – Links for Uploaded Files
The uploaded files will have the following relative links:
- /files/theme/video-popup.js
- /files/theme/video-popup.css
- /files/theme/close.png
You can also use the absolute URLs like below:
- https://yoursite.com/files/theme/video-popup.js
- https://yoursite.com/files/theme/video-popup.css
- https://yoursite.com/files/theme/close.png
If that doesn’t work, right click on the uploaded file and copy the complete Weebly URL. It should look like below:
https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/881978474505006211/files/close.png
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
On your Weebly site, 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:
<script type="text/javascript" src="/files/theme/video-popup.js"></script>
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 --> <div class="btn"> <a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a> </div> <!-- 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> </div> <!-- Vimeo Popup as Text Link with Autoplay --> <p> <a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a> </p> <!-- Vimeo Popup as Text Link without Autoplay --> <p> <a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a> </p> <!-- YouTube Video Linked with Image without Autoplay --> <div> <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> </div>
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. The widget will is useful, as long as you have the URL of a video.
Below is how the widget will look like, click on the link to see the pop-up with lightbox effect.
Vimeo Video with Autoplay as Text Link
Vimeo Video without Autoplay as Text Link
Click on the image below to see the YouTube video popup.
7 Comments
Leave your reply.