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.
<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>
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.
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.