Привет) Я только начинаю разбираться с написанием сайтов, и если с html и css все более менее нормально, то js я, честно, не знаю. Понимаю, что нужно выучить, но сделать нужно срочно. Я на сайт должна вставить адаптивный видеофон. А адаптивным он может быть только с использованием js. Вот тут и проблемка. Код я нашла, вставила, все работает, как я хочу. Но кнопка, которую я поместила на видео не работает из-за затемнения видео. Те если затемнение убрать, то кнопка работает и текст можно выделить, а иначе все неактивно. Что в полном развернутом виде, что при уменьшении (типо на телефонах когда будет). Может кто-нибудь знает, как это исправить. Пожалуйста, буду очень благодарна.
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="http://i.istockimg.com/video_passthrough/55502676/153/55502676.mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<!-- <div class="poster hidden">
<img src="PATH_TO_JPEG" alt="">
</div> -->
<div class="slogan">
<h1>Слоган</h1>
<button type="button" class="btn btn-primary btn-lg">ЗАКАЗАТЬ</button>
</div>
</div>
</div>
.homepage-hero-module {
opacity: 90%;
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
/*.video-container .poster img {
width: 50%;
bottom: 0;
position: absolute;
}*/
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
.slogan {
color: #ffffff;
position: relative;
font-size: 26px;
text-align: center;
margin-top: -430px;
}
.btn {
background-color: #f74f45;
border-color: #f74f45;
}
.btn:hover {
background-color: #f74f55;
border-color: #f74f45;
}
/** Document Ready Functions **/
/********************************************************************/
$(document).ready(function() {
// Resive video
scaleVideoContainer();
initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');
$(window).on('resize', function() {
scaleVideoContainer();
scaleBannerVideoSize('.video-container .poster img');
scaleBannerVideoSize('.video-container .filter');
scaleBannerVideoSize('.video-container video');
});
});
/** Reusable Functions **/
/********************************************************************/
function scaleVideoContainer() {
var height = $(window).height();
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height', unitHeight);
}
function initBannerVideoSize(element) {
$(element).each(function() {
$(this).data('height', $(this).height());
$(this).data('width', $(this).width());
});
scaleBannerVideoSize(element);
}
function scaleBannerVideoSize(element) {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
videoWidth,
videoHeight;
console.log(windowHeight);
$(element).each(function() {
var videoAspectRatio = $(this).data('height') / $(this).data('width'),
windowAspectRatio = windowHeight / windowWidth;
if (videoAspectRatio > windowAspectRatio) {
videoWidth = windowWidth;
videoHeight = videoWidth * videoAspectRatio*1.25;
$(this).css({
'top': -(videoHeight - windowHeight) / 2 + 'px',
'margin-left': 0
});
} else {
videoHeight = windowHeight * 1.25;
videoWidth = videoHeight / videoAspectRatio;
$(this).css({
'margin-top': 0,
'margin-left': -(videoWidth - windowWidth) / 2 + 'px'
});
}
$(this).width(videoWidth).height(videoHeight);
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
});
}
