Member Avatar for througheye

Hello guys,
I have a image on my static site. I want to load that html page along with that image but when a user click in that image area it tries to play a youtube video within that image area through flash. How can i accomplish that? Can anyone help me about that. From youtube what code i need. Can you give me the concept I am a novice developer. So if anybody kind enough to show me through
raw code here

thank you all

  • 2 Contributors
  • 2 Replies
  • 110 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by donaldw

Dani AI

Generated

asked how to show an image on a page and play a YouTube video inside that image area when clicked. pointed to an embed example, but that uses the old Flash/object method. Modern practice is to lazy-load the YouTube iframe on click with a small bit of JavaScript so the page stays fast and mobile-friendly.

A minimal pattern: put a thumbnail in a container that holds the video id in a data attribute, then replace the thumbnail with an iframe when clicked.

<div class="yt-thumb" data-video="VIDEO_ID" style="width:560px;aspect-ratio:16/9;">
  <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="Play video" style="width:100%;height:100%;object-fit:cover;cursor:pointer">
</div>

<script>
document.querySelectorAll('.yt-thumb').forEach(function(el){
  el.addEventListener('click', function(){
    var id = this.dataset.video;
    var iframe = document.createElement('iframe');
    iframe.src = 'https://www.youtube.com/embed/' + id + '?autoplay=1';
    iframe.frameBorder = 0;
    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
    iframe.allowFullscreen = true;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    this.innerHTML = '';
    this.appendChild(iframe);
  }, { once: true });
});
</script>

Notes and troubleshooting:

  • Use ?autoplay=1&mute=1 if you need autoplay; many browsers block audible autoplay unless muted.
  • Add a noscript fallback link to the YouTube page for users without JavaScript.
  • Keep the container responsive via aspect-ratio or the padding-top technique for older browsers.
  • Ensure your page is served over HTTPS to avoid mixed-content blocks when loading the player.
  • For advanced control (events, programmatic play/pause), use the official IFrame Player API: YouTube IFrame Player API.

Recommended Answers

All 2 Replies

Member Avatar for througheye

How i do that in javascript. Cause i heard that it can be done through
javascript.

Member Avatar for donaldw

Well, when you go to a YouTube video, it has the code for embedding the video into a webpage. That could be a useful starting point.

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/NiEUMTT5TxY&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/NiEUMTT5TxY&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>
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.