[Alina666]

Привет) Я только начинаю разбираться с написанием сайтов, и если с 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');


  });
}