Stop HTML Video loading on mobile

Hey,

I want a HTML Video embed to load on Desktop and not Mobile.

This is the code I’m using:

<video 
data-v-767e84ec="" webkit-playsinline="" playsinline="" 
video poster="https://uploads-ssl.webflow.com/5e2987d164852b030fdb60a8/5f759961fd7b4152283761b4_intro.jpg"
muted="muted"
loop="loop" 
src="https://player.vimeo.com/progressive_redirect/playback/801930354/rendition/720p/file.mp4?loc=external&signature=ea5806ae1e34f0de9e73eafbb83d8fea4b6d8c7cd05729a3d99faeade543cb5a" 
width="100%" height="100%" 
class="MediaVideo__media" 
autoplay="autoplay"
>
</video>

Thanks,
Jack

You could use the Windows.matchMedia Web API to pull this off.

if (window.matchMedia("(min-width: 992px)").matches) {
  // create the video element
  var video = document.createElement("video");
  video.setAttribute("data-v-767e84ec", "");
  video.setAttribute("webkit-playsinline", "");
  video.setAttribute("playsinline", "");
  video.setAttribute("poster", "https://uploads-ssl.webflow.com/5e2987d164852b030fdb60a8/5f759961fd7b4152283761b4_intro.jpg");
  video.setAttribute("muted", "muted");
  video.setAttribute("loop", "loop");
  video.setAttribute("src", "https://player.vimeo.com/progressive_redirect/playback/801930354/rendition/720p/file.mp4?loc=external&signature=ea5806ae1e34f0de9e73eafbb83d8fea4b6d8c7cd05729a3d99faeade543cb5a");
  video.setAttribute("width", "100%");
  video.setAttribute("height", "100%");
  video.setAttribute("class", "MediaVideo__media");
  video.setAttribute("autoplay", "autoplay");

  // get the existing video container and append the new video element
  var videoContainer = document.querySelector('.video-wrap');
  videoContainer.appendChild(video);
}


I am targeting an element the a class of “video” to insert the video element within.

Thanks! Really apricate your help.

But I’m still having trouble.

Here is the test site: test

HTML Embed Called “hero-video”

<video 
data-v-767e84ec="" webkit-playsinline="" playsinline="" 
video poster="https://uploads-ssl.webflow.com/5e2987d164852b030fdb60a8/5f759961fd7b4152283761b4_intro.jpg"
muted="muted"
loop="loop" 
src="https://player.vimeo.com/progressive_redirect/playback/801930354/rendition/720p/file.mp4?loc=external&signature=ea5806ae1e34f0de9e73eafbb83d8fea4b6d8c7cd05729a3d99faeade543cb5a" 
width="100%" height="100%" 
class="MediaVideo__media" 
autoplay="autoplay"
>
</video>

Embedded in the header

<script>

if (window.matchMedia("(min-width: 992px)").matches) {
  // create the video element
  var video = document.createElement("hero-video");
  video.setAttribute("data-v-767e84ec", "");
  video.setAttribute("webkit-playsinline", "");
  video.setAttribute("playsinline", "");
  video.setAttribute("poster", "https://uploads-ssl.webflow.com/5e2987d164852b030fdb60a8/5f759961fd7b4152283761b4_intro.jpg");
  video.setAttribute("muted", "muted");
  video.setAttribute("loop", "loop");
  video.setAttribute("src", "https://player.vimeo.com/progressive_redirect/playback/801930354/rendition/720p/file.mp4?loc=external&signature=ea5806ae1e34f0de9e73eafbb83d8fea4b6d8c7cd05729a3d99faeade543cb5a");
  video.setAttribute("width", "100%");
  video.setAttribute("height", "100%");
  video.setAttribute("class", "MediaVideo__media");
  video.setAttribute("autoplay", "autoplay");

  // get the existing video container and append the new video element
  var videoContainer = document.querySelector('.hero-video');
  videoContainer.appendChild(video);
}

</script>

Do you know why this isn’t working?

You only need to place an empty element on the page that has a class of “video-wrap”. The code creates a new video element inside that element when the viewport is greater than 992 pixels wide.

Here is a codepen demonstrating the working code using your video parameters.

Hey Jeff.

Thanks for that but I’m still having trouble implementing it on webflow.

Could you share a example within webflow?

Sorry!

I updated the code to inject the video into an element with the class of video-wrap to make following along a little easier. So the solution post has been updated.

Published Page => https://video-only-on-desktop-up.webflow.io/

Read Only Project =>

You or someone made changes to the video delivery. So its not working now. If you need professional help you can hire me.

Hey Jeff,

I’m not sure what you mean by the video delivery? Those links to the videos still work.

Is there a reason that project you created isn’t working?

Thanks,
Jack