Solved
How to make videos display correctly in cell phone?
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!
Best answer by PeeyushBansal
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>
View original
+39You 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>
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>
+39!
this is the code, you can upload your video in library and use link to video.
this is the code, you can upload your video in library and use link to video.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.
> this is the code, you can upload your video in library and use link to video.
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
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.