Вопрос или проблема

   <div id="thevideo" style="display:none; padding: 0px;">
        <center>
        <video onclick="this.play();" preload="auto" width="600" height="370">
            <source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
        </video>
        </center>
    </div>
 <script>
$(document).ready(function() {
    $('.custom-th').click(function() {
        $('.custom-th').fadeOut('fast', function() {
            $("#thevideo").css("display","block");
            $("video").click();
            });
        });
    });
</script>

.

Ответ или решение

Как добавить и скрыть видео с кликабельной иконкой кнопки воспроизведения в заголовке

Вопрос о том, как встроить в заголовок кликабельную иконку кнопки для воспроизведения скрытого видео, является довольно распространенной задачей для веб-разработчиков. В данном руководстве мы подробно рассмотрим процесс создания такой функциональности, используя HTML, CSS и JavaScript (jQuery).

Шаг 1: Подготовка HTML

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

<div id="thevideo" style="display:none; padding: 0px;">
    <center>
        <video id="myVideo" onclick="this.play();" preload="auto" width="600" height="370">
            <source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
            Ваш браузер не поддерживает видео плеер.
        </video>
    </center>
</div>

<div class="header">
    <button class="custom-th">▶️</button>
</div>

В этой кодовой структуре:

• #thevideo скрывает видео с помощью CSS свойства display:none;.
• Видео будет воспроизводиться при щелчке по нему, благодаря встроенному обработчику события onclick.

Шаг 2: Стилизация кнопки

Для улучшения пользовательского интерфейса вы можете добавить стили для кнопки, чтобы она выглядела более привлекательно. Например:

.header {
    position: relative;
}

.custom-th {
    background-color: #4CAF50; /* Зеленый */
    color: white; /* Белый текст */
    border: none; /* Без границ */
    padding: 10px 20px; /* Отступ */
    text-align: center; /* Центрирование текста */
    text-decoration: none; /* Без подчеркивания */
    display: inline-block; /* Инлайновый блок */
    font-size: 16px; /* Размер шрифта */
    cursor: pointer; /* Курсор как указатель */
    border-radius: 5px; /* Закругленные углы */
}

Шаг 3: Скрипт для управления взаимодействием

Теперь добавим JavaScript (в частности, jQuery) для управления кликами по кнопке и воспроизведением видео:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.custom-th').click(function() {
        $(this).fadeOut('fast', function() {
            $("#thevideo").css("display", "block");
            $("#myVideo")[0].play();
        });
    });
});
</script>

Пояснение кода:

• При загрузке документа jQuery связывает событие клика с элементом button.custom-th.
• Когда кнопка нажата, она исчезает с помощью анимации fadeOut, и скрытое видео становится видимым (свойство display меняется на block).
• Плеер запускает видео автоматически с помощью метода play().

Шаг 4: Оптимизация и проверка

После реализации функционала важно провести тестирование на различных устройствах и браузерах, чтобы убедиться, что видео загружается и воспроизводится корректно. Также рекомендуется следить за оптимизацией загрузки видео, чтобы минимизировать время ожидания пользователя.

Рекомендуемые моменты для SEO:

• Используйте семантически правильные теги HTML и структурируйте код.
• Оптимизируйте видео файлы для ускорения загрузки.
• Убедитесь, что альтернативный текст у видео и кнопки понятен и содержит ключевые слова.

Таким образом, вы создадите привлекательный и функциональный элемент на своем веб-сайте, который будет улучшать пользовательский опыт.