Это семантическая разметка, чтобы поместить полноэкранный фоновый видео тег внутри тега заголовка? - PullRequest
Новая
       17

Это семантическая разметка, чтобы поместить полноэкранный фоновый видео тег внутри тега заголовка?

0 голосов
/ 27 августа 2018

Мне нужно отобразить полноэкранное фоновое видео для моего сайта. Я очень строг в написании семантической разметки html5.

Мне нужно знать, где я должен разместить видео разметку? Должно ли оно быть внутри <header> или <main>?

Метод № 1 - Внутри <header>

<body>
        <header>
            <nav></nav>
            <div class="bg-video">
                <!-- Full screen background video -->
                <video class="bg-video-content" poster="video/fxb.jpg" autoplay loop muted>
                   <source src="video/fxb.mp4" type="video/mp4">
                   <source src="video/fxb.ogv" type="video/ogg">
                   <source src="video/fxb.webm" type="video/webm">
               </video>
           </div>
        </header>
        <main>
            <!-- Services -->
            <section class="services"></section>
        </main>
        <footer></footer>
    </body>

Метод № 2 - Внутри <main>

<body>
        <header>
            <nav></nav>
        </header>
        <main>
            <!-- Home -->
            <section class="home">
                <div class="bg-video">
                     <!-- Full screen background video -->
                     <video class="bg-video-content" poster="video/fxb.jpg" autoplay loop muted>
                        <source src="video/fxb.mp4" type="video/mp4">
                        <source src="video/fxb.ogv" type="video/ogg">
                        <source src="video/fxb.webm" type="video/webm">
                    </video>
                </div>
            </section>
        </main>
        <footer></footer>
    </body>

Я также хочу разместить логотип и навигацию внутри header, поэтому рекомендуется помещать тег video вместе с заголовком и кнопкой поверх него внутри header, или я должен поместить тег video внутри main области? Спасибо

...