悬停在嵌入视频中的标题上

Question

有没有办法让嵌入视频中的鼠标悬停时显示标题？我在 DIV 中尝试了 ALT 和 TITLE 属性，但没有成功。

<!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>

我找到了悬停播放视频的纯 JS 解决方案，但不确定如何修改悬停标题。

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>

Answer 1

当您的光标悬停在视频上时，您的 iframe 标签是优先的，而 iframe 不接受 "title" 属性，因此它永远不会出现。

我认为显示 div 标题的唯一方法是在 div 中添加一个填充，但它只会在您将鼠标悬停在填充区域时出现，不要悬停 iframe。

不过，我会在jQuery

之前完成

您的 HTML 代码：

<!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>

您的jQuery代码：

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

那么你只需要添加一些CSS

悬停在嵌入视频中的标题上

On hover for titles in embed videos

html

javascript

youtube

embedded-resource