Как поставить видео на фоне html-страницы?

Question

Хочу поставить видеофон на сайт, но при открытии страницы выдаёт "Internet Explorer запретил выполнение сценариев и элементов ActiveX на этой странице". В Яндекс Браузере просто серый фон.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Video background</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="text">
        <h1>Albmont</h1>
    </div>
    <div class="video-bg">
        <video width="100%" height="auto" preload="auto" autoplay="autoplay" loop="loop" poster="video.mp4">
            <source src="video.mp4" type="video/mp4"></source>
        </video>
    </div>

</body>
</html>

Answer 1

Все в коде нормально, в примере можно наблюдать воспроизведение видео. Возможные проблемы, которые возникли у вас:

Неправильный путь до видео файла
Не поддерживаемый браузером кодек видео. Добавьте теги <source> с альтернативными видео. Если видео из примера работает в ваших браузерах, то проблема в том, что ваш .mp4 файл пожат НЕ кодеком Н.264, а чем-то иным.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Video background</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="text">
        <h1>Albmont</h1>
    </div>
    <div class="video-bg">
        <video width="100%" height="auto" preload="auto" autoplay="autoplay" loop="loop" poster="https://pixabay.com/get/gb63cf8d246ad400209ee15bb399b05ec53b91827b80a0ddb3e2384c2e306eef519c7bc491d8946f41f189e0dfb3beea7_640.jpg">
            <source src="https://vod-progressive.akamaized.net/exp=1617373435~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F659%2F20%2F503297067%2F2299315549.mp4~hmac=ba773643fd95eb9ee68acbb77d03c76f5f242e260feba8cc979ca60bc77c27aa/vimeo-prod-skyfire-std-us/01/659/20/503297067/2299315549.mp4?filename=Ocean+-+62249.mp44" type="video/mp4">
        </video>
    </div>

</body>
</html>

БЛОГ НА HUSL

Как поставить видео на фоне html-страницы?

Ответы (1 шт):