在移动设备上为网站设置背景图片滑块

Question

我在我客户的网站上有一个 HTML 嵌入式视频背景，它在桌面上运行良好，但在移动设备上却不行，因为它需要设置更多参数。

所以我想在手机上加载网站时显示图片背景滑块。

表示我要加载：桌面 = HTML 视频/移动平板电脑 = 滑块。

问题是如何添加滑块并使其正常工作，请问？？

P.s：HTML视频

的代码段

                    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0" poster=""> 
                    <source src="videos/video-1.webm" type="video/webm"> 
                    <source src="videos/video-1.mp4" type="video/mp4"> 
                    <source src="videos/video-1.ogg" type="video/ogg">
                    <p>Your browser does not support the video element. Try this page in a modern browser!</p>   
                    </video>

CSS :

    #video_background { 
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
    }

此致:)

Answer 1

我想您要问的是如何在移动设备中加载不同的元素来代替视频。

您可以使用@media 查询，但您将在移动设备的后台加载这两个元素。

#slider { display: none; } 
@media only screen and (max-width: 768px) {
  #video-background { display: none; }
  #slider { display:block; }
}

这将完全脱离屏幕尺寸。要更准确地定位特定设备，look here.

或者，您可以在服务器端只为桌面提供视频，而不使用那么多的带宽。

在移动设备上为网站设置背景图片滑块

Set background images slider for website on mobile

html

css

mobile

background

slider