Custom code for making videos hosted in qualtrics library Full screen automatically | XM Community
Skip to main content

 

We’re running an experiment where our short 6 second video clips need to ideally load in Full screen mode when the question displays allowing the user to click play on the play button that is auto-embedded over the screen. Alternatively, we could disable the user controls of the video and have them click a button that would move the video to full screen and start playing. 

My html code of a sample video looks like this:

Watch this video:<br />
<br />


<video class="qmedia" controls="true" height="380" preload="auto" width="450"><source src="https://lvc.qualtrics.com/CP/File.php?F=F_8IiNUf5k0oU49Qq" type="video/mp4" /><embed align="middle" autoplay='true'  bgcolor="white" class="qmedia" controller="true" height="380" pluginspage="http://www.apple.com/quicktime/download/" src="https://lvc.qualtrics.com/CP/File.php?F=F_8IiNUf5k0oU49Qq" type="video/quicktime" width="450" /></video

 

I’ve tried reading other posts on this topic and adding the code recommended here (see below) to no avail: https://stackoverflow.com/questions/32823436/auto-full-screen-iframe-video-without-using-any-api   The videos are hosted in the qualtrics library so <iframe> doesn’t seem to apply.

    function goFullscreen(id) {
    var element = document.getElementById(id);

    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();

 

Any help would be really appreciated! Thank you!

SOLVED: My programmer friend helped write this script to accomplish this. Sharing in the hopes it will help someone else! The highlight is where you can customize your video link. This script disabled qualtrics video controls, and  added a button that will cause the video  to go to full screen and auto-play on click.

 

<script>

            function start_video() {

    var element = document.getElementById("this_video");

    if (element.mozRequestFullScreen) {

      element.mozRequestFullScreen();

    } else if (element.webkitRequestFullScreen) {

      element.webkitRequestFullScreen(); }

            element.play();}

</script>

<style>

.my_button {

  background-color: #002a4e;

  border: none;color: white;padding: 15px 32px;

  text-align: center;text-decoration: none;display: inline-block;

  font-size: 16px;font-weight: bold;

}

</style>

<center>

<p><b>Click the "start video" button below and hit ESC when video finishes</b></p>

<button class=”my_button" onClick="start_video()" style="color:white;">Start Video</button>

<br><video id="this_video" class="qmedia" height="380" preload="auto" width="450"><source src="

           

            https://lvc.qualtrics.com/CP/File.php?F=F_8IiNUf5k0oU49Qq

           

" type="video/mp4" /></video></center>

Leave a Reply


Terms & Conditions