根据屏幕宽度创建背景视频

发布于 2025-01-27 03:29:45 字数 3039 浏览 2 评论 0原文

我想根据我的视口宽度创建一个背景视频元素。到目前为止，我已经尝试过，但不幸的是没有成功。

        <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(&quot;https://uploads-ssl.webflow.com/618427c454b0a519900b9198/6276866ad0b6dfd92c709261_video-mobile-poster-00001.jpg&quot;)" 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(&quot;https://uploads-ssl.webflow.com/618427c454b0a519900b9198/627686bfbd3c578b1dd34dbb_video-desktop-poster-00001.jpg&quot;)" 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>

如果您知道如何完成这项工作，我将非常感谢！

最好的朱利安

原文

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

分享到QQ

分享到微博