How to add a floating video or gif to a text question | XM Community
Skip to main content

Hi,

I’m an absolute beginner to Qualtrics, but I’d like to get user feedback on a floating gif/video next to text in a qualtrics question, which means I need to add a floating gif to a Qualtrics question. I’d like to keep it stickied in place in the bottom right corner. Could someone help me create the code for this in iFrame, unless there’s a better way to do it, add a fixed float position to css? I found a previous post with code for iFrames for Qualtrics, but the post no longer exists.

I found an article online that talks about embedding a video that floats: https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/ and I can get the video to appear, but I can’t get it to autoplay or float which means I’d need to use a gif. But I can’t find a tutorial for a fixed position gif on the page.

Any help would be appreciated.

 

I tried adding the following to the image in the rich content editor of the question to see if I could get the gif to float along with the webpage as you scroll, but the image is staying fixed. Please help!

<img width="130" style="height: 80px; width: 130px; float: right; background-attachment: fixed;" src="XXXX" height="80"><br>

I’m still stuck on this. If anyone has an insight, it would be greatly appreciated!

This should work with gif:

HTML (Put this on any one of the question HTML of the page):

<div class="bottom-right"><img alt="GIF at bottom right" src="YOUR GIF URL.gif" /></div>

CSS (This can go in look and feel → Style):

.bottom-right {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 10px; /* Adjust margin as needed */
}

.bottom-right img {
    width: 150px; /* Adjust size as needed */
    height: auto;
}

 

This should work with gif:

HTML (Put this on any one of the question HTML of the page):

<div class="bottom-right"><img alt="GIF at bottom right" src="YOUR GIF URL.gif" /></div>

CSS (This can go in look and feel → Style):

.bottom-right {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 10px; /* Adjust margin as needed */
}

.bottom-right img {
    width: 150px; /* Adjust size as needed */
    height: auto;
}

 

This worked!!! Thank you! Thank you! Thank you!

Leave a Reply


Terms & Conditions