Tom Cardoso
Tom Cardoso

Reputation: 99

Making a YouTube video title card that plays the video on click

I'm currently building a site with a big hero video at the top, and I'd like to overlay a custom title card. The project requires that the title card change colours slightly on hover, and on click, disappear and play the YouTube video hiding behind it.

The first part, making a big hero image with hover text, was easy (http://couchcreative.co/tcc/stories.html). Now, however, I'm struggling with the following steps:

1) Getting the title card to disappear for good on click, revealing the YouTube video below (I'm guessing I'd use some form of javascript to toggle an opacity or display change on the divs to swap out the two elements?).

2) Getting the click to start playing the YouTube video immediately, so users don't have to click twice to watch the video.

3) Making sure the title card doesn't come back when the video is paused or finishes playing.

I've been dicking around with YT's javascript API, and I've customized a chromeless player to what I need, but I'm having trouble with the javascript that ensures the title card disappears and the video starts playing. Any help would be greatly appreciated!

Upvotes: 0

Views: 514

Answers (1)

Tom Cardoso
Tom Cardoso

Reputation: 99

Figured it out. Turns out the YouTube API required me to ready the player, which I didn't realize was necessary. Added in some jQuery fadeIn's and fadeOut's and I was good to go. All I had to do was make a new JS file that contained:

var player;

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

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

    });

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

    });

    player.playVideo();

});

I also made sure to call the YouTube API file in my HTML, which I realized pretty late I'd forgotten to do. Animation turned out pretty okay in the end, too. Sweet!

Upvotes: 1

Related Questions