Jump to content

Adding a pop out video on icon click

Recommended Posts

  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi,

The easiest way is use Video Lightbox Plugin to achieve this. 

If you need a free solution, you can use this code from Codepen: https://codepen.io/webrav/pen/ZrBNQR

>> Add a Code Block with this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" />
<script>
$(function() {
    $('.popup-youtube, .popup-vimeo').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
<style>
  a.popup-youtube {
  	font-size: 0px;
  }
  a.popup-youtube:before {
  	content: "\e01f";
    font-family: "squarespace-ui-font";
    font-size: 30px !important;
  }
</style>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=pBFQdxA-apI">Open YouTube video</a><br>

Replace youtube with new video url

 

Quote

(The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.)

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 7/31/2022 at 3:58 PM, Stevey1919 said:

Hi 

Thank you! How can I use this purple play icon as the code block icon rather than the CC? 

Screenshot 2022-07-31 at 09.57.40.png

Can you share link to page where you added the code? We can check CC icon easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.