Jump to content

Pop Out Lightbox Video Source

Recommended Posts

Site URL: https://www.sekyiwabrooke.com

Hey all,

I found a method to add a lightbox link but I'm not sure how to get it to work with an <iframe> to embed Youtube videos? I've tried with a regular <video> and that works fine but the <iframe> is blank black.

Page - Code Injection

Quote

<link href="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />   <script src="//code.jquery.com/jquery-latest.js"></script> <script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script></link>

Code Block #1 (The Lightbox Info)

Quote

<div style="display:none;">
 <div id="bio-john" style="max-width:375px;">
<center>
  <video controls autoplay>
  <source src="#" type="video/mp4">
</video>
   </div>
   </div>

Code Block #2 (The Link)

Quote

<a href="//cdn.rawgit.com/noelboss/featherlight/1.3.2/release/featherlight.min.css" data-featherlight="#video-pop">TRAILER</a>

 

The video pops up but it's not loading/linking to the Youtube url. I also don't know how to fix the sizing to make the lightbox bigger. Any help would be appreciated!

 

Thanks,

Edited by vanessakrystin
Link to comment
1 hour ago, vanessakrystin said:

Site URL: https://www.sekyiwabrooke.com

Hey all,

I found a method to add a lightbox link but I'm not sure how to get it to work with an <iframe> to embed Youtube videos? I've tried with a regular <video> and that works fine but the <iframe> is blank black.

Page - Code Injection

Code Block #1 (The Lightbox Info)

Code Block #2 (The Link)

 

The video pops up but it's not loading/linking to the Youtube url. I also don't know how to fix the sizing to make the lightbox bigger. Any help would be appreciated!

 

Thanks,

Which is the popup link in your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 10/19/2021 at 2:37 AM, vanessakrystin said:

@tuanphan

I have it set back to a video source as the YT iframe did not work. It is a live website so I couldn't have it be a dead video source. I could make a dummy page with the iframe in there for you to see the source if that helps?

You can duplicate the site & add * share url there. We can check easier

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.