How to Add a Popup YouTube Video to a Blogger, this post learning to add a Popup YouTube Video Player To Blogger Website. Popup video players improve the user experience by allowing viewers to watch videos without leaving the current page.
They enhance engagement, save space, offer contextual presentation, allow for customization, optimize performance, and overall provide a user-friendly and engaging way to present videos. The code for a Popup YouTube player using JavaScript and HTML:
<style>
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.popup-container.show {
opacity: 1;
pointer-events: auto;
}
.close-button {
position: absolute;
top: 30px;
right: 30px;
color: #ffffff;
cursor: pointer;
font-size: 25px;
}
.video-container {
position: relative;
width: 80%;
max-width: 800px;
margin: 0 auto;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.play-button {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 40px;
background-color: #4caf50;
color: #ffffff;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.play-button svg {
width: 20px;
height: 20px;
margin-right: 8px;
}
@media only screen and (max-width: 768px) {
.video-container {
width: 90%;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.video-container {
width: 700px;
height: 393.75px; /* 16:9 aspect ratio */
}
}
@media only screen and (min-width: 1025px) {
.video-container {
width: 800px;
height: 450px; /* 16:9 aspect ratio */
}
}
</style>
<button id="popup-button" class="play-button">
<svg viewBox="0 0 24 24">
<path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
</svg>
Watch Now
</button>
<div id="popup-container" class="popup-container">
<span class="close-button" onclick="closePopup()">X</span>
<div class="video-container">
<iframe id="youtube-iframe" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script>
function openPopup(videoId) {
var popupContainer = document.getElementById('popup-container');
var youtubeIframe = document.getElementById('youtube-iframe');
youtubeIframe.src = "https://www.youtube.com/embed/" + videoId;
popupContainer.classList.add('show');
}
function closePopup() {
var popupContainer = document.getElementById('popup-container');
var youtubeIframe = document.getElementById('youtube-iframe');
youtubeIframe.src = "";
popupContainer.classList.remove('show');
}
var popupButton = document.getElementById('popup-button');
popupButton.addEventListener('click', function() {
openPopup("VIDEO_ID_HERE");
});
</script>In this code, replace "VIDEO_ID_HERE" with the actual YouTube video ID you want to load. You can see the demo here, just click the below button If you want to add multiple buttons in the same page to open different videos in the popup, You may modify the JavaScript code to provide for multiple video IDs and set the video ID dynamically when a button is clicked.
<style>
/* Styles for popup and video container */
/* ... (previous CSS styles) ... */
</style>
<button id="popup-button1" class="play-button" data-video-id="VIDEO_ID_1">
<svg viewBox="0 0 24 24">
<path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
</svg>
Play Video 1
</button>
<button id="popup-button2" class="play-button" data-video-id="VIDEO_ID_2">
<svg viewBox="0 0 24 24">
<path fill="#ffffff" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
</svg>
Play Video 2
</button>
<!-- ... Add more buttons as needed ... -->
<div id="popup-container" class="popup-container">
<span class="close-button" onclick="closePopup()">X</span>
<div class="video-container">
<iframe id="youtube-iframe" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script>
function openPopup(videoId) {
var popupContainer = document.getElementById('popup-container');
var youtubeIframe = document.getElementById('youtube-iframe');
youtubeIframe.src = "https://www.youtube.com/embed/" + videoId;
popupContainer.classList.add('show');
}
function closePopup() {
var popupContainer = document.getElementById('popup-container');
var youtubeIframe = document.getElementById('youtube-iframe');
youtubeIframe.src = "";
popupContainer.classList.remove('show');
}
var popupButtons = document.querySelectorAll('.play-button');
popupButtons.forEach(function(button) {
button.addEventListener('click', function() {
var videoId = this.getAttribute('data-video-id');
openPopup(videoId);
});
});
</script>The sample of how you can achieve that each button has a data-video-id attribute that specifies the YouTube video ID. The JavaScript code selects all elements of the play-button class and adds a click event listener to each button. When a button is pressed, the data-video-id value is retrieved and passed to the openPopup function, which opens the associated video in the popup. You can add as many buttons as you want, each with its own unique data-video-id attribute. Replace "VIDEO_ID_1", "VIDEO_ID_2", and so on with the real YouTube video IDs for each button. Hope this post will help you add a Youtube Popup video player button to your Blogger website.
