How to make videos display correctly in cell phone? | XM Community
Solved

How to make videos display correctly in cell phone?

  • 29 July 2018
  • 5 replies
  • 551 views
P
Newbie with an urgent question here. I included a video from my files library in a survey, but the video won't display in a cell phone when it's in the portrait mode (you can't see the play button). Only when you put the cell phone in the landscape mode can the video be displayed properly. Is there any way to have the video display properly however the respondents use their cellphone?

I tried the method discussed in this thread: https://www.qualtrics.com/community/discussion/665/resize-video-to-fit-screen-e-g-mobile-phone , but what exactly to add in the "add your iframe or image here" part? The html looks like the following after I inserted the video to the survey:

```<video class="qmedia" controls="true" height="360" preload="auto" width="636"><source src="........" type="video/mp4" /><embed align="middle" autoplay="false" bgcolor="white" class="qmedia" controller="true" height="360" pluginspage="http://www.apple.com/quicktime/download/" src="........" type="video/quicktime" width="636" /></video>```

(I replaced source src with ........)

Thanks much for your help!
icon

Best answer by PeeyushBansal 30 July 2018, 04:57

View original

5 replies

PeeyushBansal
Rank
Userlevel 7
Badge +33
You can use below:-

An 80% solution that's a bit easier to implement would be to add a CSS style of width: 100%; to the video, leaving the iframe height alone.

Open your survey.
1.) Click on the question editor where the video is embedded.
2.) Choose the HTML View tab. Locate the <iframe> tag.
3.) Remove the width="000" attribute.
4.) Before height="315", add this style attribute: style="width:100%;"
Here's a sample of what my finished HTML looks like:
<iframe style="width:100%;" height="315" src="https://www.youtube.com/embed/0000000" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Best Regards, Peeyush
P
Thanks for the reply. As you can see from the codes I pasted above, there is no <iframe> tag in my html view. I did use your frame but the issue persists.

> @bansalpeeyush29 said:
> You can use below:-
>
> An 80% solution that's a bit easier to implement would be to add a CSS style of width: 100%; to the video, leaving the iframe height alone.
>
> Open your survey.
> 1.) Click on the question editor where the video is embedded.
> 2.) Choose the HTML View tab. Locate the <iframe> tag.
> 3.) Remove the width="000" attribute.
> 4.) Before height="315", add this style attribute: style="width:100%;"
> Here's a sample of what my finished HTML looks like:
> <iframe style="width:100%;" height="315" src="https://www.youtube.com/embed/0000000" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
PeeyushBansal
Rank
Userlevel 7
Badge +33
!
this is the code, you can upload your video in library and use link to video.
Best Regards, Peeyush
P
I tried this. Didn't work. By the way, why is the height kept at 315?


> @bansalpeeyush29 said:
> !
> this is the code, you can upload your video in library and use link to video.
Jenah
Rank
Badge
Hi @peconomics!
It looks like you are asking about custom programming/code. We actually have a Developer Corner in the community that is reserved for these types of questions. Therefore, I have moved your question to that section instead so coders and programmers are more likely to answer your question.
P.S. They might assume that you already have a basic knowledge of programming and how to integrate it into Qualtrics. If you do not, we recommend checking out W3Schools and our pages on Adding Custom CSS and Adding JavaScript to get a basic understanding!

Leave a Reply


Terms & Conditions