Как заменить изображение, вызываемое кнопкой меню, на встроенное видео

Question

Я пытаюсь адаптировать веб-шаблон под свои нужды. Сайт выглядит так: http://tomcreus.com/ В левом нижнем углу расположены три кнопки (1,2,3), которые позволяют изменить фоновое изображение. Я хочу заменить фото со встроенными видео. Это возможно? Насколько это сложно? Какую часть кода мне нужно опубликовать, чтобы помочь?

РЕДАКТИРОВАТЬ:

<ul class="pagination">
    <li class="current"><a href="images/bg_img1.jpg">1</a></li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

Заранее спасибо!

Answer 1

Вы можете поставить video в сторону твоей anchor теги, как это.

<ul class="pagination">
    <li class="current">
        <a href="https://www.google.com/">
            <video width="320" height="270" controls>
                <source src="steve_powell_320_hard.mp4"  type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
                <source src="steve_powell_320_hard.webm" type="video/webm; codecs=vp8, vorbis">
                <source src="steve_powell_320_hard.ogv"  type="video/ogg; codecs=theora, vorbis">
            </video>
        </a>
    </li>
    <li><a href="images/bg_img1.jpg">2</a></li>
    <li><a href="images/bg_img3.jpg">3</a></li>
</ul>

Просто измените src из source элементы физического видеофайла на вашей системе / сервере ИЛИ дают URL видео с веб-сайта.

РЕДАКТИРОВАТЬ:

Эта ссылка на w3schools может быть полезной для встраивания видео на YouTube. И эта ссылка для встраивания физических видеофайлов в ваш HTML.

РЕДАКТИРОВАТЬ:

Проверьте ниже два вопроса. Вы можете получить какое-то направление оттуда. Это для HTML5

1. видео в качестве фона сайта? HTML 5
2. Можете ли вы отобразить HTML5 в качестве полноэкранного фона?