制作点击播放视频的 YouTube 视频标题卡

Posted 2023-02-25

【中文标题】制作点击播放视频的 YouTube 视频标题卡

【英文标题】：Making a YouTube video title card that plays the video on click

【发布时间】：2013-01-28 22:41:18

【问题描述】：

我目前正在构建一个顶部有一个大型英雄视频的网站，我想覆盖一个自定义标题卡。该项目要求标题卡在悬停时稍微改变颜色，点击时消失并播放隐藏在其后面的 YouTube 视频。

第一部分，制作带有悬停文字的大英雄图像，很容易 (http://couchcreative.co/tcc/stories.html)。但是，现在我正在努力执行以下步骤：

1) 让标题卡在点击时永久消失，显示下面的 YouTube 视频（我猜我会使用某种形式的 javascript 来切换不透明度或在 div 上显示更改以交换两个元素?)。

2) 点击即可立即开始播放 YouTube 视频，用户无需点击两次即可观看视频。

3) 确保视频暂停或播放结束时标题卡不会返回。

我一直在使用 YT 的 javascript API，并且我已经根据我的需要定制了一个无铬播放器，但是我在使用确保标题卡消失并且视频开始播放的 javascript 方面遇到了问题。任何帮助将不胜感激！

【参考方案1】：

想通了。原来 YouTube API 要求我准备好播放器，我没有意识到这是必要的。添加了一些 jQuery 淡入和淡出，我很高兴。我所要做的就是创建一个新的 JS 文件，其中包含：

var player;

function onYouTubePlayerAPIReady() 
    player = new YT.Player('ytplayer', 
    );


$('a.containerdiv').click(function() 
    $('.titlecard').fadeOut('fast', function() 

    );

    $('.youtubevideo').fadeIn('fast', function() 

    );

    player.playVideo();

);

我还确保在我的 HTML 中调用 YouTube API 文件，但我很晚才意识到我忘了这样做。最后的动画效果也很好。甜蜜！