Question 108424 in Html Question posted in
Some basic documentation can be found here.

Html – Loading different videos based on mobile or desktop

I’m trying to load a different video based on whether or not the user is on desktop (landscape) or mobile (portrait).
The URL is www.bubina.com
If you load this on a mobile, it just loads the side of the video, but on desktop it’s fine. I have a separate, portrait version of the video that I need to load for mobile.
I’ve been trying to solve this with a number of fixes I found online: var javascript to call in different videos, using a media tag, etc, but I just can’t get it to work. I’d appreciate any help please.

You can have a look at what I’m doing here:

<style>
var mainVideo = $('video#LoadVideo');
var mobileSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4";
var desktopSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4";
 
if ($(window).width() < 980) {
     mainVideo.append("<source type='video/mp4' src='"https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4"'/>");
} else {
     mainVideo.append("<source type='video/mp4' src='"https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4"'/>");
}
</style>
</head>
<body>
<video id="LoadVideo">
</video>
</body>

I’ve also tried this:

<style>
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo"> 
<source src="https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4" media="only screen and (min-device-width: 1080px)"></source> 
<source src="https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4" media="only screen and (max-device-width: 1080px)"></source> 
</video>
</body>

Thanks in advance.

I tried to get a different video to load in desktop and mobile but the same one is loading on each device.

There is this question/answer: How to play 2 different videos based on screen size?

But the answer says the below:

if (window.innerWidth > 425) {
    // display video for desktop
} else {
    // display video for mobile
}

And I don’t understand what to put where it says "display video for desktop" and "display video for mobile". What sort of code goes there? Where do the URLs for the video go? I need more explanation than that – I’m really limited on javascript knowledge, but I do know CSS and HTML.

Tags:

2

Answers


  1. 0

    Your code has a few issues:

    1. You have some simple typos. First, JavaScript code goes in a <script> tag, not a <style> tag. Also, you’re mixing up the quote you use for the string and the HTML attributes. You also didn’t include a <script> tag for jQuery. I’ve fixed these typos below.
    2. You’ll want to use < 425 to check for smaller screens. 980 pixels is too big.
    3. It doesn’t make much sense to add a whole <source> element, instead just create one upfront and change the src attribute.
    var videoSrc = $('#LoadVideo');

if ($(window).width() < 425) {
     videoSrc.attr('src', 'https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4');
} else {
     videoSrc.attr('src', 'https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4');
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video>
  <source type="video/mp4" id="LoadVideo"/>
</video>
    Login or Signup to reply.
  2. 0

    Use Jquery to control what you want to load in the video part

    For a better user’s experience

    • do it when the page is first loaded
    • do it when user resizes the window

    So the code is

    <script
  src="https://code.jquery.com/jquery-3.6.4.js"
  integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E="
  crossorigin="anonymous"></script>

<html>
<body>
TEST<br>
<video id=vid style="width:100%;height:auto;" controls autoplay></video>
TEST2<br>
</body>
</html>

<script>


function loadvideo() {
var mobileSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-mobile-with-text-480.mp4";
var desktopSrc = "https://www.bubina.com/work/wp-content/uploads/2023/04/LMNT-for-homepage-desktop-with-text-480.mp4";
 
   if (window.innerWidth > 630){
       $("#vid").attr("src",desktopSrc);
    }else{
       $("#vid").attr("src",mobileSrc);
    }
}

  window.addEventListener("resize", loadvideo);
  window.onload=loadvideo; 

</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search