How to make videos mobile friendly? | XM Community
Skip to main content

How to make videos mobile friendly?

  • October 11, 2022
  • 1 reply
  • 610 views
J
Forum|alt.badge.img+1

Hi,
I am a new user of Qualtrics and I would highly appreciate your help. I am using YouTube videos in my survey and they work perfectly with laptop preview. However, those videos don't fit the screen correctly with smartphones, I don't know why. I noticed that there have been similar issues with other users but I haven't found a solution yet.
Can someone give me a step-by-step procedure on how to embed a video that works perfectly with laptops and smartphones? I already tried some kind of "responsive video" HTML code but that did not work..


Best,
Jesse

    1 reply

    Tom_1842
    Level 8 ●●●●●●●●
    Forum|alt.badge.img+28
    • Tom_1842
    • Level 8 ●●●●●●●●
    • October 11, 2022

    Hi there, I've used the below before with YouTube videos and it works well for me. First, add the below over in the Style section of your survey's Look & Feel:
    .container { position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 56.25%;
    }

    .responsive-iframe {
    position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
    Then over in your survey question, add the below to the Question Text using the HTML/Source View "<>" in the Rich Content Editor, updating the YouTube URL as needed:



    Attached is a QSF where it's working for me if it helps.
    VideoWebsiteEmbeddingV2.qsf

    Terms & ConditionsAccessibility statement