Member Avatar for Lefian
Lefian 0 Newbie Poster

Hello all!

I would like to ask for some help/guidance on how to achieve the following:

I am currently working on a website where I have an image and next to it a jquery youtube player (). Both of them work fine and are placed next to each other.

However, what I would like to achieve is to get the same youtube player to open up in a pop up style window when someone clicks on that image and then I would remove the existing youtube player next to the image as there is no point having it twice.

The pop up window seems to be the most ideal solution as the music won't be interrupted when browsing the other pages of the website.

I have been thinking of some sort of simple javascript to achieve this and i'm pretty sure it is possible to do.

Any input would be most appreciated!

  • 1 Contributor
  • 0 Replies
  • 203 Views

Dani AI

Generated

Short answer for : open a small, dedicated player page in a separate window (use a fixed window name) and pass the video ID to it. Reuse that same popup for subsequent clicks so playback continues, and stop/remove the inline player in the main page before hiding it. Use postMessage to change the popup's video without reloading it. This avoids rebuilding the player every time and keeps audio playing while the user navigates other pages.

Example main-page handler (open or reuse popup, send video ID, stop the inline player):

// main page
let popupWin = null;
document.querySelector('#coverImage').addEventListener('click', function () {
  const videoId = this.dataset.video; // e.g. <img id="coverImage" data-video="abc123">
  const url = '/popup.html?v=' + encodeURIComponent(videoId);

  if (!popupWin || popupWin.closed) {
    popupWin = window.open(url, 'ytPopup', 'width=900,height=600');
  } else {
    popupWin.postMessage({ videoId }, window.location.origin);
    popupWin.focus();
  }

  // stop/hide the inline player (if using YouTube IFrame API)
  if (window.inlinePlayer && typeof window.inlinePlayer.pauseVideo === 'function') {
    window.inlinePlayer.pauseVideo();
  }
  document.querySelector('#inline-player').style.display = 'none';
});

Minimal popup page strategy: accept a v query param and listen for postMessage to load new IDs. Embed the iframe with enablejsapi=1 and autoplay=1 (user gesture required in some browsers).

<!-- popup.html (simplified) -->
<iframe id="yt" width="800" height="450" frameborder="0"
  allow="autoplay; encrypted-media" allowfullscreen></iframe>

<script>
function loadVideo(id) {
  document.getElementById('yt').src =
    'https://www.youtube.com/embed/' + id + '?enablejsapi=1&autoplay=1&rel=0';
}

window.addEventListener('message', (e) => {
  if (e.origin !== window.location.origin) return;
  if (e.data && e.data.videoId) loadVideo(e.data.videoId);
});

const params = new URLSearchParams(location.search);
if (params.get('v')) loadVideo(params.get('v'));
</script>

Notes and cautions: test across browsers — popup blockers can stop window.open unless the action is a direct user click, and some browsers restrict autoplay with sound (opening on click usually satisfies the gesture requirement but not always). Always validate postMessage origins and call the appropriate API method (e.g., player.destroy() or pauseVideo()) to free resources on the main page. If you need a more robust UX without popups, consider converting navigation into an SPA or using a detachable floating player that persists while you change content.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.