The videos in my survey are really small when doing the survey on a mobile phone.

Question

I've been in contact with you before regarding this problem. Then I was told to write a new question, to get help with JavaScript.

Here is a link to the preview of the survey (it is randomised so that you will be directed to 2 different surveys)
https://www.soscisurvey.de/advertisingsome/?act=tt6GzKQflilLdCYW8zhYceWr

Here is the HTML for each of the video (There is a different video in each of the 2 surveys)

<iframe width="560" height="315" src="https://www.youtube.com/embed/44NTSpobFb8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe src="https://www.youtube.com/embed/KdVHukeD3xM" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="800" height="800" frameborder="0"></iframe>

(Someone from the support helped me to fix the 2:nd one so that it would be bigger (but it still doesn't work on the phone). I'm not sure how to fix the 1:st one so that it looks the same, therefore they are different.

Is there something else you need for me in order to solve my problem (to make the video bigger when doing the survey on a mobile phone)?

Thanks!

Comments

Please user the button {} to format HTML or any other code as code. I already changed that in this posting.

Answer 1

Okay, so the challenge is to set the initial width of the video according to the available page width. You have a width:height ratio of 560:315 (in your first video), so I assume, this is the ratio you need for the second video as well. Let's try this one:

<div id="sample"></div>
<iframe id="video" src="https://www.youtube.com/embed/KdVHukeD3xM" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" style="width: 800px; height: 600px;"></iframe>
<script type="text/javascript">
function setSize() {
  var sample = document.getElementById("sample");
  var width = sample.offsetWidth;
  var height = width / 560 * 315;
  // Set new size
  var video = document.getElementById("video");
  video.style.width = width + "px";
  video.style.height = height + "px";
  // Red border just for checking
  video.style.border = "1px solid red";
}
setSize();
window.addEventListener("resize", setSize);
</script>

This will always use the max. width for the video. Make sure, you use the correct width/height ratio to get this working. I have added a red border for you to better see what is happening.

If that won't solve the problem, please post a pretest URL that starts directly on the page with the video, please.