style.css

/*Обнуление*/
*{padding:0;margin:0;border:0;}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
:focus,:active{outline:none;}
a:focus,a:active{outline:none;}
nav,footer,header,aside{display:block;}
html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display:none;}
button{cursor:pointer;}
button::-moz-focus-inner{padding:0;border:0;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul li{list-style:none;}
img{vertical-align:top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
////////////////////////////////////////////////////////////////
/*Стили делают айфрейм responsive*/
.wrapper-iframe {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.wrapper-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*
<div class="wrapper-iframe">
    <iframe></iframe>				   
</div>

*/
/////////////////////////////////////////////////////////////////////////////////
/*стили скрывающие у сликслайдера разлетающуюся простыню блоков при загрузке*/
.slick-frame {
    visibility: hidden;
}
.slick-frame.slick-initialized {
    visibility: visible;
}
//////////////////////////////////////////////////////////////////////////////////
/* youtube */
.video-responsive {
   height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
 
    margin: 0px auto;
    /* max-width: 800px;*/
    width: 100%;
}
.video-responsive iframe {
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
@media  (max-width: 767px) { .dropdown-menu>li>a { white-space: pre-wrap ;}.video-responsive { width: 100%; }}
////////////////////////////////////////////* end youtube */


//заперт загрузки видео
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}
/////////////////////////////////////////////////////

/*дрожалка*/
.shaking-block:hover {/*:hover нужен для того, чтобы эффект работал при наведении*/
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;/*Вот эта строчка нужна для того, чтобы работало дрожание*/
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
 
/*Вот эта часть задаёт отклонение элемента.*/
/*Допустим, наша анимация длится 1 секунду = 1 000 миллисекунд*/
@keyframes shake {
  10%, 90% {/*Здесь задано положение блока в 100 и 900 миллисекунду*/
    transform: translate3d(-1px, 0, 0);  /*Здесь первое число - это отклонение по горизонтали, а второе - отклонение по вертикали.*/
  }
   
  20%, 80% {/*Здесь задано положение блока в 200 и 800 миллисекунду*/
    transform: translate3d(2px, 0, 0); 
  }
 
  30%, 50%, 70% {/*Здесь задано положение блока в 300, 500 и 700 миллисекунду*/
    transform: translate3d(-4px, 0, 0);
  }
 
  40%, 60% {/*Здесь задано положение блока в 400 и 600 миллисекунду*/
    transform: translate3d(4px, 0, 0); 
  }
}
/*Ниже заданы стили, которые нужны для примера. В Вашем проекте они уже не нужны.*/
/*Теперь достаточно добавить к любому блоку класс shaking-block и при наведении он "задрожит"*/
//////////////////////////////////////////////////////////////