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

Question

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

第一部分，制作带有悬停文本的大英雄形象，很简单 (http://couchcreative.co/tcc/stories.html)。但是，现在我正在努力执行以下步骤:

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

2) 点击立即开始播放 YouTube 视频，这样用户就不必点击两次来观看视频。

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

我一直在研究 YT 的 javascript API，并且根据需要定制了一个无边框播放器，但我在使用确保标题卡消失和视频开始播放的 javascript 时遇到了问题。任何帮助将不胜感激!

Answer 1

想通了。原来 YouTube API 要求我准备好播放器，我没有意识到这是必要的。添加了一些 jQuery fadeIn 和 fadeOut，我很高兴。我所要做的就是制作一个新的 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 文件，但我很晚才意识到我忘了这样做。最后动画效果也很不错。甜!