Button to pop-up video

Develop, Build & Integrate CMS Development
1

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!

2

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
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

3

Hi @MAlava,

here’s a basic code for a popup module

HTML+Hubl

{% 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:

.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