How To Add A Popup YouTube Video Player To Blogger Website
In this article, I will show you how you can add a Popup YouTube Video Player To Blogger Website.
Popup video players provide an improved user experience by allowing videos to be watched 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.
Here is 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.
If you want to add multiple buttons in the same page to open different videos in the popup, you can modify the JavaScript code to handle multiple video IDs and dynamically set the video ID when a button is clicked. Here’s an example of how you can achieve that:
<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>Here, each button has a data-video-id attribute that specifies the YouTube video ID. The JavaScript code selects all elements with the class play-button and adds a click event listener to each button. When a button is clicked, it retrieves the data-video-id value and passes it to the openPopup function to open the corresponding video in the popup.
You can add as many buttons as needed, and each button can have its unique data-video-id attribute. Replace “VIDEO_ID_1“, “VIDEO_ID_2“, and so on, with the actual YouTube video IDs you want to load for each button.
I hope this article will help you add a YouTube Popup video player button to your Blogger website. If you have any doubts, you can ask in the comment section.
Subscribe to our YouTube channel for more tutorials like this.
