How to make videos mobile friendly? | Experience Community
Skip to main content
JoseS
Administrator
1 year ago

How to make videos mobile friendly?

  • Oct 11, 2022 8:59 AM UTC
  • 1 reply
  • 679 views
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 ●●●●●●●●
    • Oct 11, 2022 12:17 PM UTC

    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