Member Avatar for Ries

Would it be possible to use a css rollover (a tooltip type thing) but to have a youtube video embeded into the rollover box, and if so what would be the code to do it?

  • 4 Contributors
  • 3 Replies
  • 115 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by seoindia5

Dani AI

Generated

Short answer: yes — you can show a YouTube embed inside a hover/tooltip, but the best approach depends on the player type, browser quirks, performance and mobile behavior. asked if it was possible; was cautious, and pointed toward JavaScript solutions. Both views are useful: pure CSS can work in simple cases, but JS gives control, avoids heavy page load, and handles stopping the video when the tooltip closes.

A minimal CSS-only pattern (works when the embed is an iframe/HTML5 player) is to place the iframe inside a positioned, hidden element that becomes visible on :hover:

<div class="thumb">
  <img src="thumb.jpg" alt="preview">
  <div class="tooltip">
    <iframe width="320" height="180" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

.thumb { position:relative; display:inline-block; }
.tooltip { position:absolute; top:100%; left:0; display:none; z-index:999; }
.thumb:hover .tooltip { display:block; }

Use JS when you need lazy-loading, to stop playback, or to support touch devices. Lazy-loading reduces initial weight by keeping the real src in data-src and setting iframe.src on hover/click. To stop playback when the tooltip hides, either remove the src or (better) use the YouTube IFrame Player API to call stopVideo().

Troubleshooting & cautions:

  • Older Flash-era embeds will sit above HTML unless wmode is set to opaque/transparent. If behavior is flaky, use the iframe HTML5 embed or set wmode on the Flash object.
  • Touch devices have no hover: provide a click/tap toggle instead.
  • Autoplay with sound is blocked by many browsers; mute if you must autoplay on hover.
  • For many thumbnails, always lazy-load to avoid dozens of iframe requests.
  • Accessibility: provide meaningful alt text, keyboard focus to open the tooltip, and captions where possible.

If a simple CSS hover fails, implement the lightweight JS pattern above; it solves most practical problems and matches the suggestions from and without loading a full lightbox library.

Recommended Answers

All 3 Replies

Member Avatar for FC Jamison

I don't believe that is possible.

Member Avatar for mikeandike22

Doubt you could do it with pure CSS but maybe if you modified the mediabox(http://iaian7.com/webcode/Mediabox) javascript code to display the video on hover state instead of onclick then it could work.

Member Avatar for seoindia5

I think Javascropt can do this.

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.