Плавающее видео на сайте в ВордПресс

Все чаще замечаю на сайтах конструкторах видео в плавающем формате.
Его часто используют на сайтах экспертов для привлечения внимания и знакомства с аудиторией.

Удобно же когда ты зашел на сайт а на нем уже есть видео с владельцем сайта.
Например вы хотите заказать услуги какого то специалиста, в нашем случае вы можете предоставить услуги веб-разработчика.

И когда на вашем сайте будут социальные гарантии (то есть видео в котором вы расскажете немного о себе)
Вы будете создавать доверие к себе.

Вообще доверие поможет вам продавать гораздо больше.

Как создать такое видео записал в уроке https://youtu.be/nAfK05101GU

<style>
.video {
position:fixed;
right:20px;
bottom:10px;
z-index:1000; 
}
#myVideo {
width:180px; 
}

.close__button {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #333333;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1100;
}
</style>

<div class="video">
<div class="video__wrapper">
<div class="close__button" onclick="hideVideo()">x</div> 
<video id="myVideo" controls muted autoplay loop>
<source src="https://frila-school.ru/wp-content/uploads/2024/09/video_2024-09-09_11-59-40.mp4" type="video/mp4">
Ваш браузер не поддерживает встроенные видео.
</video>
</div>
</div>

 <script>
    function hideVideo() {
    const videoElement = document.querySelector('.video');
    videoElement.style.display = 'none';
    }
    </script>

Почитаем еще?: