# Button to pop-up video

**URL:** <https://community.hubspot.com/t/button-to-pop-up-video/64167>\
**Category:** CMS Development\
**Created:** [August 31, 2022, 12:27pm UTC](https://community.hubspot.com/t/button-to-pop-up-video/64167 "2022-08-31T12:27:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MAlava](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@MAlava](https://community.hubspot.com/u/MAlava)\
**Post date:** [August 31, 2022, 12:27pm UTC](https://community.hubspot.com/t/button-to-pop-up-video/64167/1 "2022-08-31T12:27:32Z")

</div>

Hello,

I’m trying to add a button that, when clicked, opens a pop-up video (youtube).

Does anyone have an idea how I can do it?

Thanks!

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [August 31, 2022, 1:51pm UTC](https://community.hubspot.com/t/button-to-pop-up-video/64167/2 "2022-08-31T13:51:07Z")

</div>

I’ve done these before for clients. It’s definitely a custom module development that you’d need to hire a developer for.

Or have a look around codepen for video modal popups and modify the code for your use case.

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 31, 2022, 4:21pm UTC](https://community.hubspot.com/t/button-to-pop-up-video/64167/3 "2022-08-31T16:21:06Z")

</div>

Hi @MAlava,

here’s a basic code for a popup module

**HTML+Hubl**

```lia-code-sample
{% require_js %}
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
/*!
 * GRT Youtube Popup - jQuery Plugin
 * Version: 1.0
 * Author: GRT107
 *
 * Copyright (c) 2017 GRT107
 * Released under the MIT license
*/

(function ( $ ) {

	$.fn.grtyoutube = function( options ) {

		return this.each(function() {

			// Get video ID
			var getvideoid = $(this).attr("youtubeid");

			// Default options
			var settings = $.extend({
				videoID: getvideoid,
				autoPlay: true
			}, options );

			// Convert some values
			if(settings.autoPlay === true) { settings.autoPlay = 1 } else { settings.autoPlay = 0 }

			// Initialize on click
			if(getvideoid) {
				$(this).on( "click", function() {
					 $("body").append('<div class="grtvideo-popup">'+
								'<div class="grtvideo-popup-content">'+
									'<span class="grtvideo-popup-close">X</span>'+
									'<iframe class="grtyoutube-iframe" src="https://www.youtube.com/embed/'+settings.videoID+'?rel=0&wmode=transparent&autoplay='+settings.autoPlay+'&iv_load_policy=3" allowfullscreen frameborder="0"></iframe>'+
								'</div>'+
							'</div>');
				});
			}

			// Close the box on click or escape
			$(this).on('click', function (event) {
				event.preventDefault();
				$(".grtvideo-popup-close, .grtvideo-popup").click(function(){
					$(".grtvideo-popup").remove();
				});
			});

			$(document).keyup(function(event) {
				if (event.keyCode == 27){
					$(".grtvideo-popup").remove();
				}
			});
		});
	};

}( jQuery ));
</script>
{% end_require_js%}

<span class="youtube-link" youtubeid="{{ module.youtube_link|cut('https://www.youtube.com/watch?v=')|cut('https://youtu.be/') }}">{{ module.button_label }}</span>

```

**CSS:**

```lia-code-sample
.grtvideo-popup {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(0,0,0, 0.85);
	z-index:99999;
}

.grtvideo-popup-content {
	margin-top:150px;
	width:95%;
	max-width:850px;
	margin-left:auto;
	margin-right:auto;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4);
	-moz-box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4);
	box-shadow: 0px 0px 8px 0px rgba(255,255,255,0.4);
	position:relative;
}

.grtvideo-popup-close {
	position:absolute;
	top:-35px;
	right:0;
	color:#FFF;
	font-size:25px;
	cursor:pointer;
}

.grtyoutube-iframe {
	width:100%;
	height:480px;
}

@media (max-width:767px) {
	.grtyoutube-iframe {
		width:100%;
		height:350px;
	}
}

```

You’ll need to add at least two text fields(not rich-text) one called “Youtube link” and the other “Button label”.

This is pretty basic but will work.

Tipp: If you’re planning to use the module several times on one page cut the CSS part from the module and include it either in your main CSS file or create a seperate one and link it in the module. By doing so the CSS part will be getting loaded only once.

best,

Anton