Pinning video at top of page | XM Community
Skip to main content

Hello all,

I am trying to pin a video at the top of a page when it loads in my survey so that respondents don’t have to scroll down to see it. I have looked at forum posts that pertain to having question texts at the top of the page, but would that code still apply to my situation? I am also trying to figure out how to get my video to autoplay once the page loads. Below is the HTML code for the video:

<video class="qmedia" controls="true" height="600" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle" autoplay="true" bgcolor="white" class="qmedia" controller="true" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800" /></video>
  &nbsp;

I assumed that setting autoplay to “true” would do the trick, but it didn’t. Is there something else I need to do?

Thank you!

@V.E. Add auto play attribute to <video> tag

Try this, let me know if it works

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

 

@dxconnamnguyen That did work, thanks! Is there also a way to disable the controls? Would you also happen to know how to pin the video at the top of the page? The reason I want to do that is because if the video autoplays, then the respondent will miss part of the video when they have to scroll down to see it. Thanks!

@V.E. Yeah, just put controller to false
Try this

<video autoplay="" class="qmedia" height="600" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle" bgcolor="white" class="qmedia" controller="false" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800"></embed></video>

To pin this on top, check out this thread, it might be relevant

Let me know if this helps

@dxconnamnguyen Thanks for the suggestion. I tried changing controller to “false,” but it didn’t quite work; I still can see the controllers.

As for pinning the video, I’ve tried combining the suggested code and what I had for coding keyboard response to the video (i.e., pressing “J” or “K” for the appropriate multiple choice response after watching the video, which would take the respondent to the next page):

Qualtrics.SurveyEngine.addOnload(function()
{
    base_element = document.querySelector(".SkinInner")
    base_element.insertAdjacentHTML('afterbegin', '
');
    new_element = document.querySelector("#sticky_vid")
    new_element.innerHTML = ~<video autoplay="" class="qmedia" controls="false" height="600" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" controller="false" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800" /></video>
&nbsp; &nbsp;~"    
    base_element.style.zIndex = 1;
    new_element.style.zIndex = 10;
});
});
{
this.hideNextButton();
this.hidePreviousButton();
var that = this;
Event.observe(document, 'keydown', function keydownCallback(e) {
var choiceID = null;
switch (e.keyCode) {
case 74: // 'J' was pressed
choiceID = 1;
break;
case 75: // 'K' was pressed
choiceID = 2;
break;
}
if (choiceID) {
Event.stopObserving(document, 'keydown', keydownCallback);
that.setChoiceValue(choiceID, true);
that.clickNextButton();
}
});
});

However, I get the following error message: “Invalid JavaScript! You cannot save until you fix all errors: Unexpected token ILLEGAL.” I am new to coding; would you happen to know what might be wrong? Thanks!

@dxconnamnguyen Thanks for the suggestion. I tried changing controller to “false,” but it didn’t quite work; I still can see the controllers.
    new_element.innerHTML = ~<video autoplay="" class="qmedia" controls="false" height="600" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" controller="false" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800" /></video>
&nbsp; &nbsp;~"    

Try delete that controls="false"

@V.E. I tested this myself, this should work
Let me know if anything come up

Qualtrics.SurveyEngine.addOnload(function() {
	var base_element = document.querySelector(".SkinInner");
	base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

    var new_element = document.querySelector("#sticky_vid");
    new_element.innerHTML = '<video autoplay class="qmedia" height="600" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" controller="false" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800" /></video>';

    base_element.style.zIndex = 1;
    new_element.style.zIndex = 10;

    this.hideNextButton();
    this.hidePreviousButton();

    var that = this;
    document.addEventListener('keydown', function keydownCallback(e) {
        var choiceID = null;
        switch (e.keyCode) {
            case 74: // 'J' was pressed
                choiceID = 1;
                break;
            case 75: // 'K' was pressed
                choiceID = 2;
                break;
        }
        if (choiceID) {
            document.removeEventListener('keydown', keydownCallback);
            that.setChoiceValue(choiceID, true);
            that.clickNextButton();
        }
    });
});

 

@dxconnamnguyen Removing controllers=false worked, thank you!

I’ve tried the code you suggested, and below is an image of how the page now looks like:

 

 

Since I still need to scroll down a little to see the full video, do you know if there is a way to move the video up the page even further? I may have to reduce the size of the video, but I'd prefer not to. Thank you so much for your ongoing help!

    @V.E. Add this to your custom CSS

.Skin .SkinInner {
    padding-top: 0px !important;
}

And change the innerHTML height to 500px, there’s some blank space at the top and bottom

 

Man, I’ve been helping you since your Keyboard Input as Answer thread :)) Can’t leave you alone with this cheeky thing

@dxconnamnguyen Yes, you’ve been helping me quite a bit! :)

Would the code look like this? I’m getting an error message now (“Invalid JavaScript! You cannot save until you fix all errors: Unexpected token .”):

Qualtrics.SurveyEngine.addOnload(function() {
    .Skin. SkinInner {
    padding-top: 0px !important;
}
    var base_element = document.querySelector(".SkinInner");
    base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

    var new_element = document.querySelector("#sticky_vid");
    new_element.innerHTML = '<video autoplay class="qmedia" height="500" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" height="600" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_dgMA9lWXc5mgg18" type="video/quicktime" width="800" /></video>';

    base_element.style.zIndex = 1;
    new_element.style.zIndex = 10;

    this.hideNextButton();
    this.hidePreviousButton();

    var that = this;
    document.addEventListener('keydown', function keydownCallback(e) {
        var choiceID = null;
        switch (e.keyCode) {
            case 74: // 'J' was pressed
                choiceID = 1;
                break;
            case 75: // 'K' was pressed
                choiceID = 2;
                break;
        }
        if (choiceID) {
            document.removeEventListener('keydown', keydownCallback);
            that.setChoiceValue(choiceID, true);
            that.clickNextButton();
        }
    });
});

@dxconnamnguyen Yes, you’ve been helping me quite a bit! :)

Would the code look like this? I’m getting an error message now (“Invalid JavaScript! You cannot save until you fix all errors: Unexpected token .”):

Qualtrics.SurveyEngine.addOnload(function() {
    .Skin. SkinInner {
    padding-top: 0px !important;
}
    var base_element = document.querySelector(".SkinInner");
    base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');………………….

  

I mean put the “.Skin.SkinInner” in Look & Feel → Style → Custom CSS. Not in the Java Script

 

@dxconnamnguyen Got it, thanks! But wouldn’t that apply to the entire survey (I have additional sections in the survey)? To give an idea of my survey looks like, it is glitching a bit:

You’ll see at the 2-second and 7-second marks that when the pages with the videos load, they start out at a certain size and then reconfigure, which is quite disorienting. Any ideas why this occurs? The videos in which I have not yet adjusted the code do not have this issue. And after I’ve added the custom CSS code, this is actually happening throughout the entire survey, too, though it’s not nearly as noticeable. Below is the HTML and JavaScript code for the first video shown, if that helps. Thanks!:

<video autoplay="" class="qmedia" height="400" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_56Y5CBojAj0j0YS" type="video/quicktime" width="800" /></video>

 

Qualtrics.SurveyEngine.addOnload(function() {
    var base_element = document.querySelector(".SkinInner");
    base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

    var new_element = document.querySelector("#sticky_vid");
    new_element.innerHTML = '<video autoplay class="qmedia" height="500" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/quicktime" width="800" /></video>';

    base_element.style.zIndex = 1;
    new_element.style.zIndex = 10;

    this.hideNextButton();
    this.hidePreviousButton();

    var that = this;
    document.addEventListener('keydown', function keydownCallback(e) {
        var choiceID = null;
        switch (e.keyCode) {
            case 74: // 'J' was pressed
                choiceID = 1;
                break;
            case 75: // 'K' was pressed
                choiceID = 2;
                break;
        }
        if (choiceID) {
            document.removeEventListener('keydown', keydownCallback);
            that.setChoiceValue(choiceID, true);
            that.clickNextButton();
        }
    });
});
 

Qualtrics.SurveyEngine.addOnload(function() {
    var base_element = document.querySelector(".SkinInner");
    base_element.insertAdjacentHTML('afterbegin', '<div id="sticky_vid" style="position: sticky; top:0;" align="middle">');

    var new_element = document.querySelector("#sticky_vid");
    new_element.innerHTML = '<video autoplay class="qmedia" height="500" preload="auto" width="800"><source src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/mp4" /><embed align="middle"  bgcolor="white" class="qmedia" height="400" pluginspage="http://www.apple.com/quicktime/download/" src="https://unc.az1.qualtrics.com/CP/File.php?F=F_5zp3qW9UH4DmAbc" type="video/quicktime" width="800" /></video>';


 

You have 2 different height here. Try to keep the meter consistent

@dxconnamnguyen I appreciate the suggestion! It doesn’t look like it changed anything, though. 

Would you be able to additionally clarify what you had meant earlier about setting the internal HTML height to 500px? I had changed the JavaScript code to that height where it said “new_element.innerHTML =” accordingly.

@dxconnamnguyen I appreciate the suggestion! It doesn’t look like it changed anything, though. 

Would you be able to additionally clarify what you had meant earlier about setting the internal HTML height to 500px? I had changed the JavaScript code to that height where it said “new_element.innerHTML =” accordingly.

Because your video block size have some blank space at the top & bottom, so resize will make stick closer to the top.

I don’t have that disorienting bug, give me the survey QSF file so I can investigate.

@dxconnamnguyen I’ve DM’ed you, thanks!

Leave a Reply


Terms & Conditions