Home
blogging tips
html-project

YouTube Video Embed Popup Script (HTML, CSS, JS) — Responsive

YouTube video embed popup script — add YouTube videos in a smart way with responsive design and distraction-free viewing on any device.
Aaqib Amin
YouTube Video Popup script code

Modern websites often use YouTube video popups to grab user attention in a smart way. Unlike traditional embedded videos, popups keep the main page clean and distraction-free while still showing engaging content to visitors.

These popups come with different options—some continue playing in the background even after closing, while others stop completely for a distraction-free experience. With drag-and-drop support, users can move the video anywhere on the screen, making it highly flexible on both desktop and mobile devices.

Adding a YouTube video popup is very simple. By editing the embed URL and pasting the code into your website, you can make your site more interactive, modern, and professional, while also increasing watch time and user engagement.

Table of Contents
There are 4 different types with different features. You can use any one.

1. YouTube Video Popup with Background Audio

YouTube Video Popup script code

This YouTube video popup is designed to capture user attention in a smart way. The video appears automatically after 5 seconds, keeping visitors engaged without cluttering the main page. Unlike static embeds, the popup makes the website look clean and modern.

One unique feature is that even after closing the popup window, the video keeps playing in the background. This helps in improving the overall watch time of your YouTube videos.

<div id="videoPopup">
  <div id="popupContent">
    <span id="closeBtn">&times;</span>
    <iframe src="https://www.youtube.com/embed/nPThLdLNaxc?autoplay=1&mute=1" 
        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

<style> #videoPopup{display:none;position:fixed;bottom:20px;right:20px;z-index:9999;border-radius:12px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.4);cursor:move}
#popupContent{position:relative;background:#111;border-radius:12px}
#closeBtn{position:absolute;top:5px;right:8px;font-size:20px;color:#fff;background:rgba(0,0,0,0.5);border-radius:50%;width:26px;height:26px;text-align:center;line-height:26px;cursor:pointer;transition:background 0.3s}
#closeBtn:hover{background:#ff0000}
iframe{display:block;width:320px;height:180px;border:none}
@media (max-width:400px){iframe{width:206px;height:116px}
}
</style>

<script>
  const popup = document.getElementById('videoPopup');
  const closeBtn = document.getElementById('closeBtn');

  // Show after 5 seconds
  setTimeout(() => { popup.style.display = "block"; }, 5000);

  // Close button
  closeBtn.onclick = () => { popup.style.display = "none"; };

  // Drag functionality
  let isDragging = false, offsetX, offsetY;

  popup.addEventListener('mousedown', e => {
    isDragging = true;
    offsetX = e.clientX - popup.offsetLeft;
    offsetY = e.clientY - popup.offsetTop;
    popup.style.transition = "none"; // remove any transition while dragging
  });

  document.addEventListener('mousemove', e => {
    if (isDragging) {
      let x = e.clientX - offsetX;
      let y = e.clientY - offsetY;
      // optional: keep popup inside window
      x = Math.max(0, Math.min(window.innerWidth - popup.offsetWidth, x));
      y = Math.max(0, Math.min(window.innerHeight - popup.offsetHeight, y));
      popup.style.left = x + "px";
      popup.style.top = y + "px";
      popup.style.bottom = "auto";
      popup.style.right = "auto";
    }
  });

  document.addEventListener('mouseup', () => { isDragging = false; });

  // Mobile touch support
  popup.addEventListener('touchstart', e => {
    isDragging = true;
    const touch = e.touches[0];
    offsetX = touch.clientX - popup.offsetLeft;
    offsetY = touch.clientY - popup.offsetTop;
    popup.style.transition = "none";
  });

  document.addEventListener('touchmove', e => {
    if (isDragging) {
      const touch = e.touches[0];
      let x = touch.clientX - offsetX;
      let y = touch.clientY - offsetY;
      x = Math.max(0, Math.min(window.innerWidth - popup.offsetWidth, x));
      y = Math.max(0, Math.min(window.innerHeight - popup.offsetHeight, y));
      popup.style.left = x + "px";
      popup.style.top = y + "px";
      popup.style.bottom = "auto";
      popup.style.right = "auto";
    }
  });

  document.addEventListener('touchend', () => { isDragging = false; });

</script>

Features

  • Auto-show popup after 5 seconds
  • Modern close button with hover effect
  • Responsive design for mobile devices
  • Background audio continues after closing
  • Clean UI with shadow and rounded corners

Simple YouTube Popup: A clean YouTube video popup that auto-plays YouTube video and keeps your page distraction-free.

2. YouTube Video Popup without Background Audio

 <div id="videoPopup">
  <div id="popupContent">
    <span id="closeBtn">&times;</span>
    <iframe src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

<style>
#videoPopup {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  cursor: move;
}

#popupContent {
  position: relative;
  background: #111;
  border-radius: 12px;
}

#closeBtn {
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 20px;
  color: #fff;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  transition: background 0.3s;
}
#closeBtn:hover { background: #ff0000; }

iframe {
  display: block;
  width: 320px;
  height: 180px;
  border: none;
}

@media (max-width: 400px) {
  iframe {
    width: 206px;
    height: 116px;
  }
}
</style>

<script>
const popup = document.getElementById('videoPopup');
const closeBtn = document.getElementById('closeBtn');
const iframe = popup.querySelector('iframe');
const videoSrc = "https://www.youtube.com/embed/rl9-w2GkXYY?autoplay=1&mute=1";

// Show popup after 5 seconds
setTimeout(() => {
  popup.style.display = "block";
  iframe.src = videoSrc; // load video
}, 5000);

// Close button: hide popup and stop video/audio
closeBtn.onclick = () => {
  popup.style.display = "none";
  iframe.src = ""; // stop video & audio
};

// Drag functionality
let isDragging = false, offsetX, offsetY;
let posX = 0, posY = 0;

// Mouse events
popup.addEventListener('mousedown', e => {
  isDragging = true;
  offsetX = e.clientX - popup.offsetLeft;
  offsetY = e.clientY - popup.offsetTop;
  popup.style.transition = "none"; // remove transition while dragging
});

document.addEventListener('mousemove', e => {
  if (!isDragging) return;
  let x = e.clientX - offsetX;
  let y = e.clientY - offsetY;
  // keep popup inside window
  x = Math.max(0, Math.min(window.innerWidth - popup.offsetWidth, x));
  y = Math.max(0, Math.min(window.innerHeight - popup.offsetHeight, y));
  popup.style.left = x + "px";
  popup.style.top = y + "px";
  popup.style.bottom = "auto";
  popup.style.right = "auto";
});

document.addEventListener('mouseup', () => { isDragging = false; });

// Touch events
popup.addEventListener('touchstart', e => {
  isDragging = true;
  const touch = e.touches[0];
  offsetX = touch.clientX - popup.offsetLeft;
  offsetY = touch.clientY - popup.offsetTop;
  popup.style.transition = "none";
});

document.addEventListener('touchmove', e => {
  if (!isDragging) return;
  const touch = e.touches[0];
  let x = touch.clientX - offsetX;
  let y = touch.clientY - offsetY;
  x = Math.max(0, Math.min(window.innerWidth - popup.offsetWidth, x));
  y = Math.max(0, Math.min(window.innerHeight - popup.offsetHeight, y));
  popup.style.left = x + "px";
  popup.style.top = y + "px";
  popup.style.bottom = "auto";
  popup.style.right = "auto";
});

document.addEventListener('touchend', () => { isDragging = false; });
</script>

This popup works just like the first one, but with one key difference: in the first popup, the video keeps playing in the background even after closing, while in this one, once the close button is clicked, the video stops completely and disappears.

3. YouTube Video Popup with Drag & Drop and Background Audio

YouTube Video Popup script code

This popup comes with a drag-and-drop feature, allowing users to move the video box anywhere on the screen using the small handle on top. It makes the experience smooth, flexible, and user-friendly on both desktop and mobile devices.

Another unique part of this popup is the background play option. This popup has a background play feature—the video keeps playing even after the popup is closed, helping boost watch time.

 <div id="videoPopup">
  <div id="hookHandle"></div>
  <div id="popupContent">
    <span id="closeBtn">&times;</span>
    <iframe src="https://www.youtube.com/embed/OkHS5-5oBfk?autoplay=1&mute=1"
        frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

<style>
#videoPopup {
  display: none;
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  user-select: none;
  touch-action: none;
}

/* Hook handle */
#hookHandle {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  border-radius: 6px;
  background: #333;
  cursor: grab;
  z-index: 10;
}
#hookHandle:active { cursor: grabbing; background: #555; }

#popupContent {
  position: relative;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
}

#closeBtn {
  position:absolute;
  top:5px;
  right:8px;
  font-size:20px;
  color:#fff;
  background: rgba(0,0,0,0.5);
  border-radius:50%;
  width:26px; height:26px;
  text-align:center;
  line-height:26px;
  cursor:pointer;
  transition: background 0.3s;
}
#closeBtn:hover { background: #ff0000; }

iframe {
  display: block;
  width: 320px;
  height: 180px;
  border: none;
}
@media(max-width:400px){ iframe{ width:206px; height:116px; } }
</style>

<script>
const popup = document.getElementById('videoPopup');
const hook = document.getElementById('hookHandle');
const closeBtn = document.getElementById('closeBtn');

// Show popup in center after 3s
setTimeout(()=>{
  popup.style.display='block';
  popup.style.left=(window.innerWidth-popup.offsetWidth)/2+'px';
  popup.style.top=(window.innerHeight-popup.offsetHeight)/2+'px';
},3000);

closeBtn.onclick = ()=> popup.style.display='none';

// Drag variables
let isDragging=false, offsetX=0, offsetY=0;
let posX=0, posY=0;

// Mouse drag
hook.addEventListener('mousedown', e=>{
  isDragging=true;
  offsetX = e.clientX - popup.getBoundingClientRect().left;
  offsetY = e.clientY - popup.getBoundingClientRect().top;
});
document.addEventListener('mousemove', e=>{
  if(!isDragging) return;
  posX = e.clientX - offsetX;
  posY = e.clientY - offsetY;
});
document.addEventListener('mouseup', ()=>isDragging=false);

// Touch drag
hook.addEventListener('touchstart', e=>{
  isDragging=true;
  const t = e.touches[0];
  offsetX = t.clientX - popup.getBoundingClientRect().left;
  offsetY = t.clientY - popup.getBoundingClientRect().top;
});
document.addEventListener('touchmove', e=>{
  if(!isDragging) return;
  const t = e.touches[0];
  posX = t.clientX - offsetX;
  posY = t.clientY - offsetY;
});
document.addEventListener('touchend', ()=>isDragging=false);

// Smooth animation
function animate(){
  if(isDragging){
    popup.style.left = posX+'px';
    popup.style.top = posY+'px';
  }
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>

Key Features

  • Drag & drop support with a visible handle
  • Background video/audio playback option
  • Smooth animation for better user interaction
  • Works with both mouse and touch devices
  • Responsive design for all screen sizes
  • Close button with two behavior modes

This popup is perfect for showing YouTube videos in a modern way while keeping the page clean and interactive.

4. YouTube Video Popup with Drag & Drop without Background Audio

 <div id="videoPopup">
  <div id="hookHandle"></div>
  <div id="popupContent">
    <span id="closeBtn">&times;</span>
    <iframe src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

<style>
#videoPopup {
  display: none;
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  user-select: none;
  touch-action: none;
}

/* Hook handle */
#hookHandle {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 12px;
  border-radius: 6px;
  background: #333;
  cursor: grab;
  z-index: 10;
}
#hookHandle:active { cursor: grabbing; background: #555; }

#popupContent {
  position: relative;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
}

#closeBtn {
  position:absolute;
  top:5px;
  right:8px;
  font-size:20px;
  color:#fff;
  background: rgba(0,0,0,0.5);
  border-radius:50%;
  width:26px; height:26px;
  text-align:center;
  line-height:26px;
  cursor:pointer;
  transition: background 0.3s;
}
#closeBtn:hover { background: #ff0000; }

iframe {
  display: block;
  width: 320px;
  height: 180px;
  border: none;
}
@media(max-width:400px){ iframe{ width:206px; height:116px; } }
</style>

<script>
const popup = document.getElementById('videoPopup');
const hook = document.getElementById('hookHandle');
const closeBtn = document.getElementById('closeBtn');
const iframe = popup.querySelector('iframe');
const videoSrc = "https://www.youtube.com/embed/rl9-w2GkXYY?autoplay=1&mute=1";

// Show popup in center after 3s
setTimeout(()=>{
  popup.style.display='block';
  popup.style.left=(window.innerWidth-popup.offsetWidth)/2+'px';
  popup.style.top=(window.innerHeight-popup.offsetHeight)/2+'px';
  iframe.src = videoSrc;
},3000);

// Close popup and stop video
closeBtn.onclick = ()=>{
  popup.style.display='none';
  iframe.src = "";
};

// Drag variables
let isDragging=false, offsetX=0, offsetY=0;
let posX=0, posY=0;

// Mouse drag
hook.addEventListener('mousedown', e=>{
  isDragging=true;
  offsetX = e.clientX - popup.getBoundingClientRect().left;
  offsetY = e.clientY - popup.getBoundingClientRect().top;
});
document.addEventListener('mousemove', e=>{
  if(!isDragging) return;
  posX = e.clientX - offsetX;
  posY = e.clientY - offsetY;
});
document.addEventListener('mouseup', ()=>isDragging=false);

// Touch drag
hook.addEventListener('touchstart', e=>{
  isDragging=true;
  const t = e.touches[0];
  offsetX = t.clientX - popup.getBoundingClientRect().left;
  offsetY = t.clientY - popup.getBoundingClientRect().top;
});
document.addEventListener('touchmove', e=>{
  if(!isDragging) return;
  const t = e.touches[0];
  posX = t.clientX - offsetX;
  posY = t.clientY - offsetY;
});
document.addEventListener('touchend', ()=>isDragging=false);

// Smooth drag animation
function animate(){
  if(isDragging){
    popup.style.left = posX+'px';
    popup.style.top = posY+'px';
  }
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
</script>

This popup is exactly like the third one with all the same features. The only difference is that in the third popup, audio/video keeps playing in the background even after closing, but in this one, when the user clicks the close button, the popup closes completely and playback stops.

Warning:
First, carefully read both "How to embed YouTube video" and "Installation Steps". They contain the complete installation process, showing you how to use the code, embed a YouTube video, and replace URL correctly.

If you use the code without reading, it may cause errors, the code might not work properly, or autoplay may not function. That’s why I’m telling you to read everything carefully first.

How to embed YouTube video

  1. Open Chrome → Go to YouTube
  2. If you are using a mobile device, turn on Desktop Mode in your browser.
  3. Search & open the video you want to embed.
  4. Click "Share" button (below the video).
  5. Select "Embed" option and Copy the iframe code shown.
    6. <iframe width="560" height="315" 
src="https://www.youtube.com/embed/rl9-w2GkXYY?si=8sJhRvwA6HNNbbwM " 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 
allowfullscreen></iframe>
  6. Copy only Embed URL:
    https://www.youtube.com/embed/rl9-w2GkXYY?si=8sJhRvwA6HNNbbwM
  7. Remove everything after the '?' in the URL si=8sJhRvwA6HNNbbwM
    https://www.youtube.com/embed/rl9-w2GkXYY?
  8. Add this code after '?' autoplay=1&mute=1
    https://www.youtube.com/embed/rl9-w2GkXYY?autoplay=1&mute=1
  9. Copy this URL and paste it into the iframe code:
    <iframe
src="https://www.youtube.com/embed/ud9-w2hrXud?autoplay=1&mute=1 "
  frameborder="0" allow="autoplay;
  encrypted-media" allowfullscreen>
  </iframe>
  10. Save/Publish your page.

Installation Steps

  1. Copy the full HTML, CSS, and JavaScript code.
  2. Paste in your notepad, notes etc.
  3. Copy only CSS and JavaScript code.
  4. Paste the CSS and JavaScript code of your website’s theme.
  5. Paste the HTML code on any web page where you want to show a YouTube video popup.
  6. Replace only embed URL. Please read first (How to embed YouTube video and use it).
  7. Save and refresh your page to see the popup working.
Info! On mobile devices, YouTube popups don’t play sound the first time due to browser restrictions, but on desktop they work fine. When opened a second time on mobile, sound plays normally. This is a browser limitation, not a code issue.

FAQ YouTube Video Popups

Why should you use a YouTube video popup?

A YouTube video popup keeps your website clean and modern. It grabs visitors’ attention without cluttering the main content and increases video watch time with auto-play and background play features.

Who can use a YouTube video popup?

Bloggers, online marketers, educators, and business websites can use a YouTube video popup. Anyone who wants to share video content effectively without interrupting the user experience can benefit.

Which category is a YouTube video popup best for?

It is best for tutorials, product demos, educational content, marketing campaigns, and entertainment websites. Any site that relies on video to explain or engage works best.

Where can you use a YouTube video popup?

You can use it on blogs, company websites, online learning platforms, news websites, and e-commerce product pages. For example, a tech blog can show tutorial videos or a store can display product demos.

Which platforms support a YouTube video popup?

It works on Blogger, WordPress, Wix, Squarespace, and custom HTML websites. Any platform that allows HTML, CSS, and JavaScript embedding can use this popup.

How does a YouTube video popup improve my website?

It keeps your website clean, modern, and engaging without cluttering the main content.

Will a YouTube video popup slow down my site?

No, it loads efficiently using lightweight HTML, CSS, and JavaScript, so performance stays smooth.

Can I use it on mobile devices too?

Yes, the popup is fully responsive and works perfectly on phones and tablets.

Can I let users move the video popup around?

Yes, drag-and-drop support allows visitors to move the popup anywhere on the screen.

Can it help increase YouTube watch time?

Yes, with background play and auto-show features, videos can keep playing even after closing, boosting watch time.

Related Posts

Final Thought:

YouTube video popups are a smart way to make your website more interactive and engaging. They keep your pages clean, highlight important video content, and improve user experience without distractions.

Whether you want to boost watch time, share tutorials, or showcase products, these popups work perfectly across devices and platforms. Adding a YouTube video popup is a simple step that can make your website modern, professional, and more engaging for visitors.

Post a Comment