How to make embedded YouTube video adjust to device screen size | XM Community
Skip to main content

Hello, everyone!

I’m struggling to ensure that my videos display well for all participants regardless of the device they are using to complete the survey. I’m talking about smartphones, tablets, and laptops/desktops.

I’ve embedded YouTube videos using the HTML code from YouTube.

When the HTML code used a height of 315 and a width of 560, the videos were only partially displayed on my smartphone’s screen (Samsung A71).

I found a suggestion here https://community.qualtrics.com/custom-code-12/resize-videos-to-fit-screen-24737 to change the width in the HTML code to “100%” and the height to “auto.”

After that change, the videos started fitting on my Samsung phone screen, though the useful area of the video, the one with the picture showing information, became a bit smaller.

At the same time, the computer version of the video became long and narrow, and the video itself occupies a very small part of the screen while about two-thirds of the area is black space:

My question is: 

Is there any HTML code I could use to fix the issue of the reduced size of the video picture?

P.S. I’m a rookie at coding. 

You can use the code below to update the dimensions automatically:

 

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qc = quest.getQuestionContainer();

	const iframe = qc.querySelector("iframe");
	iframe.style.height = "80vh";
	iframe.style.width = "80vw";
});

 

vh/vw refer to the % of total height/width of your screen.

Dear ​@ahmedA, thank you so much for the code! 

Because I don’t quite know how to code, may I exploit your expertise just a bit more?

So far I’ve just pasted your code right before </iframe>, as below, but how do I really add the code you’ve suggested?

<strong>Please watch a short scientific report below:</strong><br />
<br />
<iframe height="auto" src="https://www.youtube.com/embed/zR8PaDw_8gA" width="100%">
Qualtrics.SurveyEngine.addOnReady(function () {
    const quest = this;
    const qc = quest.getQuestionContainer();

    const iframe = qc.querySelector("iframe");
    iframe.style.height = "80vh";
    iframe.style.width = "80vw";
});
</iframe>

The code is for JavaSript. You’ll need to add it there.

Please refer to this: https://www.qualtrics.com/support/survey-platform/survey-module/question-options/add-javascript/

​@ahmedA, understood, thank you! I’ll work on getting API enabled for my account. Thank you, once again, for all your advice, the code and the link! 

​@YuliaMedvedeva you don't api access, you need Javascript.

Please read the page carefully, it mentions where you need to click to add javascript to the question. 

Leave a Reply


Terms & Conditions