CSS:
.videos{
width: 100%;
}
.videos__wrapper{
max-width: 1440px;
margin: 0 auto;
position: relative;
}
.video__item{
padding-top: 56.25%;
}
.video__element{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML:
<div class="videos">
<div class="videos__wrapper">
<div class="video__item"></div>
<iframe class="video__element"src="ссылка на видео есть просто если напишу вопрос скорее удалят" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script src="./js/main.js">
</script>
JS:
(function(){
const header = document.querySelector('.header');
window.onscroll = () =>{
if(window.pageYOffset > 50){
header.classList.add('header_active');
}
else{
header.classList.remove('header_active');
}
};
}());