'Create background video based on screen width
I would like to create a background video element based on the width of my viewport. I've tried this so far but unfortunately didn't have success.
<script>
if ($(window).width() < 768) {
let div = document.createElement('div');
div.class = 'fullsize-video-bg w-background-video w-background-video-atom';
div.data-poster-url = 'https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-poster-00001.jpg';
div.data-video-urls = 'https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-transcode.mp4,https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-transcode.webm';
div.data-autoplay = 'true';
div.data-loop = 'true';
div.data-wf-ignore = 'true';
div.innerHTML = '<video id="a5555903-b716-d8eb-3a03-360ccf397ab7-video" autoplay="" loop="" style="background-image:url("https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-poster-00001.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"><source src="https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-transcode.mp4" data-wf-ignore="true"><source src="https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-transcode.webm" data-wf-ignore="true"></video>';
document.body.appendChild(div);
}
else {
let div = document.createElement('div');
div.class = 'fullsize-video-bg w-background-video w-background-video-atom';
div.data-poster-url = 'https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-poster-00001.jpg';
div.data-video-urls = 'https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-transcode.mp4,https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-transcode.webm';
div.data-autoplay = 'true';
div.data-loop = 'true';
div.data-wf-ignore = 'true';
div.innerHTML = '<video id="a5555903-b716-d8eb-3a03-360ccf397ab7-video" autoplay="" loop="" style="background-image:url("https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-poster-00001.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"><source src="https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-transcode.mp4" data-wf-ignore="true"><source src="https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-transcode.webm" data-wf-ignore="true"></video>';
document.body.appendChild(div);
}
</script>
If you have any idea how to make this work, I would be very thankful!
Best Julian
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|