Hide the navigation buttons until the YouTube video has been played in full

Question

I think the title says it all.

The respondent has a survey page with a YouTube video playing.

I'd like the respondent to play the video in full before displaying the navigation buttons to proceed forward.

Looking forward to your reply. Thank you.

Answer 1

YouTube's API has an "onStateChange" event that can be used to trigger behavior when the video ends, like this:

<div id="player"/>

<script src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubePlayerAPIReady() {
    $('.submit_div').hide();
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'Su2qIrTmv1c',
        events: {
            'onStateChange': onStateChange
        }
    });
}
function onStateChange(event) {
    if (event.data == 0) {
        $('.submit_div').show();
    }
}
</script>

Comments

Thanks Zachary. This worked nicely.

I sent you an email with respect to ...

1/ Centring the YouTube video on all devices.
2/ Setting the height and width dimensions across all devices - making it mobile friendly.

Many thanks.

---

Try changing the HTML to this:

<div>
    <div id="player"/>
</div>

Then adding this CSS:

<style>
#player {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
</style>

---

Thanks Zachary. Looks like I now have it centred.

I made the changes you mentioned but I also removed the height and width settings (lines 9+10). Is that correct?

Much appreciated.