Have an idea?

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

Hide YouTube-video after playing?

Hi guys,

as part of a survey, we use YouTube videos to provide the information needed to answer the questions. Now YouTube has the disadvantage that after playing further videos are displayed as links in the window. This could cause respondents to unintentionally click on these links and leave the survey. Is there a possibility to hide the video after playing or at least after a certain time?

I look forward to your answers.

Many greetings
Nico
asked Oct 16 by Nico Bronze (620 points)

1 Answer

0 votes
The YouTube API has an "onStateChange" event that triggers when the video ends.  Assuming your player element has an ID of "player," you could use the event like this to hide it at the end of the video.

player = new YT.Player('player', {
    videoId: '...',
    events: {
        'onStateChange': function(e) {
            if (e.data == 0) {
                $('#player').hide();
            }
        }
    }
});
answered Oct 16 by Zachary Platinum Sawtooth Software, Inc. (153,100 points)
Hi Zachary,

Thank you for your answer!
At the moment my text question looks like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/fk7c0j5qgfU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope" allowfullscreen></iframe>

<script>
$(document).ready(function(){
    $('.submit_div').hide();
    var submitButtonsDelay = 322;
    var interval = setInterval(function(){
        submitButtonsDelay--;
        if (submitButtonsDelay <= 0) {
            $('.submit_div').show();
            clearInterval(interval);
        }
    }, 1000);
});
</script>


The aim of the script is to show the next button only after a time corresponding to the length of the video has passed.

How can I implement your code snippet?
It looks like we're using slightly different ways to embed YouTube on the page.  I started with the code I found in their documentation here: https://developers.google.com/youtube/iframe_api_reference
...