Have an idea?

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

Insert introduction video to survey

Dear community,

I am searching for a possibility to insert an introduction video into my survey that has to be watched before the first survey question appears.
I suppose that I can adjust the respective standard code for embedded videos depending on which platform (vimeo, Youtube...) I am going to use?
Is there any video platform that is better than the others to host the video (especially with regards to fit for different browser types)?

Any advice is appreciated!
Thanks and best,
Jules
asked Jan 11 by Jules (120 points)
Requiring a user to watch a video before being allowed to continue should not be too tricky with any of the normal ways to embed a video, though the exact code will change a little between each one.

There are some minor differences in functionality between the options, though.  For example, YouTube doesn't allow users to disable recommended videos, Vimeo offers certain services only to premium users, etc.  You can find examples of videos embedded through different services; looking through those may give you an idea if any of them won't work for you.

Of course, YouTube and Vimeo will require an internet connection to run.  So if you want to use Offline Surveys, an HTML5 video would be the way to go.

Someone else here with more video experience may be able to offer more insight.  Once you know what solution you want to go with, I can offer a hand in creating the code you require.
Dear Zachary,

thank you very much for the provided information!

I had a look at the different options and I will go with Vimeo Plus version. Once I have recorded the video and created the first version of the code (probably by tomorrow) I would be very happy to come back to you for double-checking.

I really appreciate your help!
Best,
Jules
Dear Zachary,

I have now created the video and the respective code. Still searching for a possibility to:
1. let the video automatically start
2. hide the "Further" button until the video is finished
3. do not allow for the "picture in picture" option (even if I remove the "picture in picture" from the code, it is still shown in the embedded video)

The actual code looks like this (I changed the number of the video in order to make sure that the real video cannot be found anywhere):

<iframe src="https://player.vimeo.com/video/501851950" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

It would be great if you could help me creating the required code.

Thank you very much and best regards,
Jules

1 Answer

0 votes
Autoplaying the video should be possible by appending this to the video URL:

?autoplay=1


To dynamically display the navigation buttons, I'd add an ID to the iframe element like this:

id="myvimeo"


Then add this script to the page:

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
$(document).ready(function(){
    $('#next_button, #previous_button').hide();
    var iframe = $('#myvimeo');
    var player = new Vimeo.Player(iframe)
    player.on('ended', function() {
        $('#next_button, #previous_button').show();
    });
});
</script>


Disabling picture-in-picture seems to be the default behavior.  I don't see that button when I use your HTML.
answered Jan 18 by Zachary Platinum Sawtooth Software, Inc. (161,250 points)
Dear Zachary,

thank you very much for your support! Everything is working very well now :)

Best,
Jules
...