Jump to content

Add lightbox pop up video via button?

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 20
  • Views 8.3k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

I usually use Video Lightbox or Anything Lightbox Plugin  (affiliate link) to achieve this.

If you don't want to use plugin, you will need to use Code Block to achieve it. 

First, find a free code on Codepen, eg these

Next share link to code you want to use, we will convert code it to Squarespace

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
On 10/2/2022 at 1:53 AM, tuanphan said:

I usually use Video Lightbox or Anything Lightbox Plugin  (affiliate link) to achieve this.

If you don't want to use plugin, you will need to use Code Block to achieve it. 

First, find a free code on Codepen, eg these

Next share link to code you want to use, we will convert code it to Squarespace

This worked great! Thank you. Ended up with the Video Lightbox plugin.

Link to comment
  • 5 months later...
19 hours ago, squarespace192012 said:

Hi TuanPhan, 

I'm wondering if you can please advise on how to render code, say from 1 of the sources you listed above, i.e. https://codepen.io/angelpolitis/pen/KMdgwx to be compatible with SquareSpace?

Thanks and regards.

Add a Code Block > paste this code

<button id = "button"><i class = "fa fa-play" aria-hidden = "true"></i></button>
<div id = "lightbox">
  <i id = "close-btn" class="fa fa-times"></i>
  <div id = "video-wrapper">
    <iframe id = "video" width="960" height="540" src = "https://www.youtube.com/embed/lJfqK9bgIng" frameborder = "0" allowfullscreen></iframe>
  </div>
</div>
<style>
  #button {
  /* Text */
  font-size: 45px;
  
  /* Dimensions */
  width: 100px;
  height: 100px;
  
  /* Positioning */
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
  /* The code above makes sure the video is
  both vertically and horizontally centered
  to the screen */
  
  /* Styling */
  background-color: rgba(0, 0, 0, 0.95);
  border: 0; /* remove annoying grey border */
  border-radius: 50%; /* make it a circle */
  outline: none; /* Ditch the annoyning blue outline on click */
  cursor: pointer;
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
  
  /* ----- Transformations ----- */
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  
  /* ----- Transitions ----- */
  -webkit-transition: transform .5s ease;
  -moz-transition: transform .5s ease;
  -ms-transition: transform .5s ease;
  -o-transition: transform .5s ease;
  transition: transform .5s ease;
}

#button:hover {
  /* ----- Transformations ----- */
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
  
  /* ----- Transitions ----- */
  -webkit-transition: transform .5s ease;
  -moz-transition: transform .5s ease;
  -ms-transition: transform .5s ease;
  -o-transition: transform .5s ease;
  transition: transform .5s ease;
}

#button > i {
  /* Text */
  color: grey;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
  
  /* Make play sign 3d-ish */
  
  /* Positioning */
  position: relative;
  margin-top: 4px;
  margin-left: 6px;
  
  /* ----- Transitions ----- */
  -webkit-transition: color .5s ease;
  -moz-transition: color .5s ease;
  -ms-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease;
}

#button:hover > i {
  /* Text */
  color: white;
  
  /* ----- Transitions ----- */
  -webkit-transition: color .5s ease;
  -moz-transition: color .5s ease;
  -ms-transition: color .5s ease;
  -o-transition: color .5s ease;
  transition: color .5s ease;
  
  /* When we hover on the button make the play sign white. */
}

#lightbox {
  /* ----- Positioning ----- */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  
  /* The code above makes sure that the
  lightbox covers the entire page*/
  
  /* ----- Visibility ----- */
  display: none;
  
  /* ----- Styling ----- */
  background-color: rgba(0, 0, 0, 0.95);
  
  /* Normally, most lightboxes do not use
  a completely solid black, but with about
  90-95% opacity so that the background is
  somewhat visible */
}

#video-wrapper {
  /* ----- Positioning ----- */
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
  /* The code above makes sure the video is
  both vertically and horizontally centered
  to the screen */
  
  /* ----- Styling ----- */
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  
  /* The code above is used to add a little shadow to the video making blend in better */
}

#close-btn {
  /* ----- Text ----- */
  color: grey;
  font-size: 25px;
  
  /* ----- Positioning ----- */
  position: fixed;
  top: 3%;
  right: 3%;
  z-index: 2;
  
  /* The code above is used to put the button on the upper right corner of the lightbox */
  
  /* ----- Transformations ----- */
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  
   /* The code above is used to initialize the scale for the button so that it can be used in transitions */
  
  /* ----- Transitions ----- */
  -webkit-transition: transform .5s ease, color .5s ease;
  -moz-transition: transform .5s ease, color .5s ease;
  -ms-transition: transform .5s ease, color .5s ease;
  -o-transition: transform .5s ease, color .5s ease;
  transition: transform .5s ease, color .5s ease;
}

#close-btn:hover {
  /* ----- Text ----- */
  color: white;
  
  /* ----- Styling ----- */
  cursor: pointer;
  
  /* ----- Transformations ----- */
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
  
    /* ----- Transitions ----- */
  -webkit-transition: transform .5s ease, color .5s ease;
  -moz-transition: transform .5s ease, color .5s ease;
  -ms-transition: transform .5s ease, color .5s ease;
  -o-transition: transform .5s ease, color .5s ease;
  transition: transform .5s ease, color .5s ease;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    
  // When the button is clicked make the lightbox fade in in the span of 1 second, hide itself and start the video
  $("#button").on("click", function() {
    $("#lightbox").fadeIn(1000);
    $(this).hide();
    var videoURL = $('#video').prop('src');
    videoURL += "?autoplay=1";
    $('#video').prop('src',videoURL);
  });
  
  // When the close button is clicked make the lightbox fade out in the span of 0.5 seconds and show the play button
  $("#close-btn").on("click", function() {
    $("#lightbox").fadeOut(500);
    $("#button").show(250);
  });
});
</script>

 

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
  • 1 month later...
On 8/4/2023 at 9:28 PM, Jillg said:

Hi! Is there is a way to add a video (instead of image) to a promotional pop up that displays when a visitor opens a website? Thank you!

Screenshot 2023-08-04 at 10.28.22 AM.png

No way. You can use gif instead

or consider create a new custom popup with code (if you need, we can check & give the code, requires a Business Plan or higher)

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
6 hours ago, tuanphan said:

No way. You can use gif instead

or consider create a new custom popup with code (if you need, we can check & give the code, requires a Business Plan or higher)

Thank you! A custom popup with code would work better than a gif for this website. The subscription is a set up as a Business Plan.

Link to comment
On 8/6/2023 at 11:34 PM, Jillg said:

Thank you! A custom popup with code would work better than a gif for this website. The subscription is a set up as a Business Plan.

Can you send desired layout of the popup? We can code it 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
  • 3 weeks later...
10 hours ago, Teifi said:

Hi @tuanphan, could you please help me convert the code in this link you provided to Squarespace?

https://codepen.io/TurnerZajac/pen/JVOWQX

Thank you.

If you add it to specific page > First edit that page > Add this Code Block > Then paste the code

<!-- PUT YOUTUBE VIDEO ID, VIMEO VIDEO ID OR VIDEO MP4 URL IN DATA-VIDEO ATTRIBUTE -->
<div class="ugb-video-popup" style="
	background: #000;"
 	 data-video='Jc1dYRCXCTI'
	 data-video='https://www.youtube.com/watch?v=Jc1dYRCXCTI'
	 >
	<div class="modal-open-link">
		<a href="#"> Demo Reel</a>
	</div>
</div>
<style>
  
.ugb-video-popup {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
}
.ugb-video-preview, a, .ugb-play-button {
	position: absolute;
	top: 0;		
	left: 0;
	right: 0;
	bottom: 0;
}
.ugb-video-preview {
	background-size: cover;
	background-position: center;
	opacity: .4;
	transition: all .3s ease-in-out;
	z-index: 1;
	object-fit: fill;
	width: 100%;
}

.ugb-video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}
a {
		z-index: 3;
		box-shadow: none !important;
		background: transparent !important;
		display: block !important;
		color: #fff;
		text-decoration: none;
	}
	.ugb-play-button {
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	svg {
		fill: #fff !important;
	}
.modal-open-link {
	font-family: sans-serif;
	font-size: 25px;
	color: #464646;
	width: 50px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	
}

</style>
<script src="https://cdn.jsdelivr.net/npm/bigpicture@1.2.3/dist/BigPicture.min.js"></script>
<script>
  // NOTE: 
// Run to install required library
// $ npm i --save bigpicture

/** FRONTEND SCRIPT **/

// Uncomment when adding into the project.
// import domReady from '@wordpress/dom-ready'
// import BigPicture from 'bigpicture'

domReady( () => {
	const elems = document.querySelectorAll( '.ugb-video-popup' )
	const openVideo = el => {
		if ( BigPicture ) {
			const videoID = el.getAttribute( 'data-video' )
			const args = {
				el,
				noLoader: true,
			}
			if ( videoID.match( /^\d+$/g ) ) {
				args['vimeoSrc'] = videoID
			} else if ( videoID.match( /^https?:\/\//g ) ) {
				args['vidSrc'] = videoID
			} else {
				args['ytSrc'] = videoID
			}
			BigPicture( args )
		}
	}
	elems.forEach( el => {
		const a = el.querySelector( '.modal-open-link' )
		a.addEventListener( 'click', ev => {
			ev.preventDefault()
			openVideo( el )
		} )
		a.addEventListener( 'touchend', ev => {
			ev.preventDefault()
			openVideo( el )
		} )
	} )
} )

/** DO NOT COPY **/
function domReady(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

</script>

 

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
23 hours ago, JAADOOGEMS said:

hi @tuanphan I am having trouble with my promotional pop-up. I added an image almost two years ago and now there is no option button to change the image. I really need to update the image as it is outdated. 

You can access Marketing > Promotional Popup

image.png.267023e8e2f4730202cd6f5ed66e3d64.png

image.thumb.png.833d6b9ae35ab534870a61f4d789b2e1.png

Find Image option

image.thumb.png.bdb3b72409900fd7a74e35abfeb2a385.png

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

hi @tuanphan I figured out (it seems there is two photos and for some reason they switch) anywyas and used your other code for the image display on mobile pop up and now its weird the close button has disapeared and my customers cant exist the popup without clicking the button. can you please help me

Link to comment
  • 1 month later...
On 10/29/2023 at 3:56 PM, GOMAPRODS said:

Hi tuanphan, thanks for the work ! 

Could you translate the 3rd code : https://codepen.io/ChidVanid/pen/EKJgBP ?

Please.

 

Edit page where you want to use it > Add a Code Block > Use this code

<a href="#lightbox" class="lightbox-toggle"
   data-lightbox-type="video"
   data-lightbox-content="https://www.youtube.com/embed/lapu8oJLtzY">
  Video</a>

<a href="#lightbox" class="lightbox-toggle"
   data-lightbox-type="image"
   data-lightbox-content="http://placehold.it/350x150">
  Image</a>
<style>
  /*LIGHTBOX STYLE*/
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.lightbox .lightbox-video {
  width: 100%;
  padding-bottom: 56%;
}
.lightbox iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
}
.lightbox img {
  display: block;
  margin: 0 auto;
}
.lightbox .lightbox-close {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  color: #ffffff;
  font-size: 26px;
  height: 50px;
  width: 50px;
  background: rgba(255, 255, 255, 0.3);
  border: 3px solid #ffffff;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
}
.lightbox .lightbox-close:hover {
  text-decoration: none;
}
.lightbox .lightbox-container {
  max-width: 1024px;
  margin: 100px auto 25px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $('body').append(`
    <div class="lightbox">
      <a href="#lightbox" class="lightbox-close lightbox-toggle">X</a>
      <div class="lightbox-container">
        <div class="row">
          <div class="col-sm-12 lightbox-column">
            
          </div>
        </div>
      </div>
    </div>
  `);

$('.lightbox-toggle').on('click', event => {
  event.preventDefault();
  $('.lightbox').fadeToggle('fast');

  let context = $(event.currentTarget).attr('data-lightbox-type');
  let content = $(event.currentTarget).attr('data-lightbox-content');
  console.log(event);
  if (context == 'video') {
    $('.lightbox-column').append(`
        <div class="lightbox-video">
        <iframe src="${content}" frameborder="0" allowfullscreen> </iframe>
        </div>
    `);
  } else if (context == 'image') {
    $('.lightbox-column').append(`
        <img src="${content}" class="img-" frameborder="0" allowfullscreen>
    `);
  }
});

$('.lightbox-close').on('click', event => {
  event.preventDefault();
  $('.lightbox-column > *').remove();
});
</script>

 

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
  • 2 weeks later...
On 8/6/2023 at 6:34 PM, Jillg said:

Thank you! A custom popup with code would work better than a gif for this website. The subscription is a set up as a Business Plan.

@tuanphan I would need something like this asap. I want a thumbnail image and then if you click the button play on it a pop up video starts. Did you understand? Thank you. Just send it over at my e-mail: designprova1@gmail.com

 

Link to comment
On 11/18/2023 at 7:48 PM, gggAR said:

@tuanphan I would need something like this asap. I want a thumbnail image and then if you click the button play on it a pop up video starts. Did you understand? Thank you. Just send it over at my e-mail: designprova1@gmail.com

 

You can use Video Lightbox Plugin I mentioned above

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
  • 4 months later...
On 11/4/2023 at 8:31 AM, tuanphan said:

Edit page where you want to use it > Add a Code Block > Use this code

<a href="#lightbox" class="lightbox-toggle"
   data-lightbox-type="video"
   data-lightbox-content="https://www.youtube.com/embed/lapu8oJLtzY">
  Video</a>

<a href="#lightbox" class="lightbox-toggle"
   data-lightbox-type="image"
   data-lightbox-content="http://placehold.it/350x150">
  Image</a>
<style>
  /*LIGHTBOX STYLE*/
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.lightbox .lightbox-video {
  width: 100%;
  padding-bottom: 56%;
}
.lightbox iframe {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
}
.lightbox img {
  display: block;
  margin: 0 auto;
}
.lightbox .lightbox-close {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  color: #ffffff;
  font-size: 26px;
  height: 50px;
  width: 50px;
  background: rgba(255, 255, 255, 0.3);
  border: 3px solid #ffffff;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
}
.lightbox .lightbox-close:hover {
  text-decoration: none;
}
.lightbox .lightbox-container {
  max-width: 1024px;
  margin: 100px auto 25px;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $('body').append(`
    <div class="lightbox">
      <a href="#lightbox" class="lightbox-close lightbox-toggle">X</a>
      <div class="lightbox-container">
        <div class="row">
          <div class="col-sm-12 lightbox-column">
            
          </div>
        </div>
      </div>
    </div>
  `);

$('.lightbox-toggle').on('click', event => {
  event.preventDefault();
  $('.lightbox').fadeToggle('fast');

  let context = $(event.currentTarget).attr('data-lightbox-type');
  let content = $(event.currentTarget).attr('data-lightbox-content');
  console.log(event);
  if (context == 'video') {
    $('.lightbox-column').append(`
        <div class="lightbox-video">
        <iframe src="${content}" frameborder="0" allowfullscreen> </iframe>
        </div>
    `);
  } else if (context == 'image') {
    $('.lightbox-column').append(`
        <img src="${content}" class="img-" frameborder="0" allowfullscreen>
    `);
  }
});

$('.lightbox-close').on('click', event => {
  event.preventDefault();
  $('.lightbox-column > *').remove();
});
</script>

 

Thank you @tuanphan this was really helpful.

The only issue I'm having is using it for multiple links to open different videos on the same page.

What do I need to edit to make it possible to have multiple links to video lightbox?

Link to comment
12 hours ago, TrevorC said:

Thank you @tuanphan this was really helpful.

The only issue I'm having is using it for multiple links to open different videos on the same page.

What do I need to edit to make it possible to have multiple links to video lightbox?

If you have multi videos, I suggest an another way to achieve this, it will be easier. You can message with link to page where you want to add lightbox, I will 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
  • 3 weeks later...

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.