Member Avatar for Member #941443

Hey guys. I have a simple code, but I'd like to replace the text that links to a video overlay, to an image that does. Could anyone help me? Thanks!

<a href="http://www.youtube.com/watch?v=VhtIydTmOVU" rel="vidbox 800 600" title="caption">our video1</a>

Dani AI

Generated

Quick practical fix for : use the same link that opens your overlay but put an image inside it instead of text. Most lightbox scripts treat the anchor as the trigger, so swapping the link text for an <img> is all that's needed—just keep whatever trigger attribute or class your lightbox requires.

Example (replace the placeholders with your video URL and thumbnail path):

<a href="VIDEO_URL" class="lightbox">
  <img src="thumb.jpg" alt="Video thumbnail" width="200" height="112" />
</a>

If your lightbox needs explicit video/iframe handling, initialize it accordingly (for example, Magnific Popup uses type: 'iframe'). Check the lightbox docs if the plugin expects a specific attribute (some use data- attributes, some use rel or a particular class). See the plugin docs for details: Magnific Popup docs and the HTML anchor reference for basics: MDN: a element.

Tips and troubleshooting:

  • Use a properly sized thumbnail (create one or use the YouTube thumbnail pattern https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg).
  • Test the video URL by opening it in a new tab to confirm it plays.
  • If the overlay opens but shows a blank area, the lightbox may require an explicit iframe/video type—check init options.
  • Add meaningful alt text for accessibility and set image dimensions to avoid layout shifts.

As observed, threads sometimes get resolved quickly; this note keeps a clear, reusable approach for anyone else needing the same thumbnail-to-lightbox setup.

Member Avatar for Member #949455

Hey guys. I have a simple code, but I'd like to replace the text that links to a video overlay, to an image that does. Could anyone help me? Thanks!

What was the answer? You post this question 8 minutes ago and now it is solved?

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.