Question

我目前正在我的网站上使用bootstrap并拥有响应式背景图片。这是在我的自定义引导主题的CSS文件中完成的。我知道你无法将MP4视频添加到背景元素中。对于我来说，实现视频的最佳方式是什么，而不是我在下面的CSS代码中使用的“closer.jpeg”图像？

作为后续跟进。是否也可以在手机上自动播放和循环？

    .intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/closer.jpeg) no-repeat bottom center scroll;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

Answer 1

HTML

<video id ="myVideo">
    <source src='video.mp4' type='video/mp4'>
    [video fallbacks here]
    [image fallback here]
<video>

CSS

#myVideo {
    display: table;
    width: 100%;
    height: auto;
    ect.
}

Bootstrap CSS视频背景

1 个答案: