Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

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

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.
asked Sep 5, 2017 by Paul Moon Platinum (97,670 points)

1 Answer

0 votes
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>
answered Sep 5, 2017 by Zachary Platinum Sawtooth Software, Inc. (202,850 points)
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.
...