Search code examples
javascripthtmlyoutubeembedded-resource

On hover for titles in embed videos

Is there a way to have titles appear on mouse hover in embed videos? I tried both ALT and TITLE attributes in DIV, but no success.

<!DOCTYPE html>
<html>
<body>
<DIV TITLE="TEST" ALT="Test">
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
</DIV>
</body>
</html>

I found this pure JS solution for play video on hover, but not sure how to modify for title on hover.

script>var playersrc;</script>
<iframe class="yt560x315" id="JSytplayer" src="https://www.youtube.com/embed/MVKts0fBW34?rel=0" onmouseover="this.src=playersrc+'&autoplay=1'" onmouseout="this.src=playersrc" frameborder="0" allowfullscreen></iframe>
<script>playersrc=document.getElementById('JSytplayer').src;</script>
Solution

  • When your cursor is hover the video your iframe tag is priority, and Iframes doesn't accepts "title" attribute, so it will never appear.

    I think the only one way to get your div's title shows up, is adding a padding to your div, but it will appear only when you are hover your padding area, not hover the iframe.

    However, i would do it by jQuery

    Your HTML code:

    <!DOCTYPE html>
<html>
<body>
  <DIV id="wrapper">
      <div id="tooltip" style="display:none;">Title</div>
      <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k">
      </iframe>
    </DIV>
  </body>
</html>

    Your jQuery Code:

    $(document).ready(function(){
  $("#wrapper").hover(function(){
    // Show our tooltip on hover
    $("#tooltip").show();
  }, function(){
    // Hide our tooltip
    $("#tooltip").hide();
  })
});

    Then you just need to add some CSS