Add lightbox pop up video via button?

Hoping to add a popup "lightbox" video on the "WATCH OUR REEL" button on the home page!

Would love to do this without the use of third party plugins... but if it's necessary, let me know what you suggest.

Mike

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

• https://codepen.io/angelpolitis/pen/KMdgwx
• https://codepen.io/TurnerZajac/pen/JVOWQX
• https://codepen.io/ChidVanid/pen/EKJgBP

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.

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.

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>

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!

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!

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)

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.

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

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.

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>

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. 

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

Find Image option

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

Hi tuanphan, thanks for the work ! 

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

Please.

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>

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

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

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?

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.