0

Друзья есть три миниатюры и при клике всплывает блок и воспроизводится видео. Проблема в том что это работает только при клике только на первую миниатюру , а на двух остальных не работает , что нужно в js прописать чтоб работала на всех? и сделать чтобы этот блок плавно всплывал

В HTML я попытался сделать остальные две миниатюры тем же способом что и с первой миниатюрой, но что-то не выходит. Вот Мой код в JSFIDDLE чтобы вы могли мне помочь и вам было легче все увидеть в живую.

    var preview = document.querySelector('.video-trigger'),
        video = document.querySelector('#video'),
        modal = document.querySelector('.modal'),
        modalClose = document.querySelector('.video-close');

    preview.onclick = function(e) {
        e.preventDefault();
        modal.classList.add('modal-visible');
        video.play();
    }
    modalClose.onclick = function() {
        modal.classList.remove('modal-visible');
        video.pause();
    }

    var preview = document.querySelector('.video-trigger')
        video = document.querySelector('#video2'),
        modal = document.querySelector('.modal'),
        modalClose = document.querySelector('.video-close');

    preview.onclick = function(e) {
        e.preventDefault();
        modal.classList.add('modal-visible');
        video.play();
    }
    modalClose.onclick = function() {
        modal.classList.remove('modal-visible');
        video.pause();
    }
    .button-image{
        float: right;
    }
    /* Базовые стили слоя затемнения и модального окна  */
    .overlay {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        display: none;
        /* фон затемнения */
        background-color: rgba(0, 0, 0, 0.65);
        position: fixed; /* фиксированное поцизионирование */
        cursor: default; /* тип курсара */
    }
    /* активируем слой затемнения */
    .overlay:target {
        display: block;
    }
    /* стили модального окна */
    .popup {
        right: 0;
        left: 50%;
        font-size: 14px;
        z-index: 20;
        width: 1030px;
        height: 640px;
        top:0;
        /* фиксированное позиционирование, окно стабильно при прокрутке */
        position: fixed;
        border: 1px solid #383838;
        background: #fefefe;

        /* внешняя тень */
        -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
        box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
        -webkit-transform: translate(-50%, -500%);
        transform: translate(-50%, -500%);
        -webkit-transition: -webkit-transform 0.6s ease-out;
        transition: transform 0.6s ease-out;
    }
    /* активируем модальный блок */
    .overlay:target+.popup {
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        top: 10px;
    }
    /* формируем кнопку закрытия */
    .close {
        top: -10px;
        right: -10px;
        width: 20px;
        height: 20px;
        position: absolute;
        padding: 0;
        border: 2px solid #ccc;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        background-color: rgba(61, 61, 61, 0.8);
        -webkit-box-shadow: 0px 0px 10px #000;
        box-shadow: 0px 0px 10px #000;
e        text-align: center;
        text-decoration: none;
        font: 13px/20px 'Tahoma', Arial, sans-serif;
        font-weight: bold;
        -webkit-transition: all ease .8s;
        transition: all ease .8s;
    }
    .close:before {
        color: rgba(255, 255, 255, 0.9);
        content: "X";
        text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
        font-size: 12px;
    }
    .close:hover {
        background-color: rgba(252, 20, 0, 0.8);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    /* изображения внутри окна */
    .popup img {
        width: auto;
        height: auto;
    }
    /* элементы м-медиа, фреймы */
    .popup embed,
    .popup iframe {
        top: 15px;
        right: 0;
        bottom: 0;
        left: 0;
        display:block;
        margin: auto;
    }
    .popup h2 { /* заголовок 2 */
        margin: 0;
        color: #008000;
        padding: 5px 0px 10px;
        text-align: left;
        text-shadow: 1px 1px 3px #adadad;
        font-weight: 500;
        font-size: 1.4em;
        font-family: 'Tahoma', Arial, sans-serif;
        line-height: 1.3;
    }
    /* параграфы */
    .popup p {margin: 0; padding: 5px 0}
    /*content*/
    .content{
        width: 1030px;
        height: 640px;
        background: url("https://s19.postimg.org/e2q693ppf/main-background.jpg") no-repeat;
    }
    .custom_links{
        display: block;
    }
    .app-store{
        background-image: url("https://s19.postimg.org/psz1tdc6b/app-store.png");
        position: absolute;
        width: 124px;
        height: 37px;
        left:435px;
        bottom:177px;
    }
    .google-play{
        background-image: url("https://s19.postimg.org/ll49kmaqr/google-play-fr.png");
        position: absolute;
        width: 109px;
        height: 37px;
        right: 332px;
        bottom: 177px;
    }
    .main-cta{
        background-image: url("https://s19.postimg.org/kk92sm02n/main-cta.png");
        width: 178px;
        height: 80px;
        position: absolute;
        right: 57px;
        bottom:32px;
        z-index: 10;
    }
    .app-store, .google-play{
        z-index: 10;
    }
    .video-box-wrapper-0{
        position: absolute;
        width:100%;
        height: 100%;
    }
    .video-trigger{
        display: block;
        transition: transform .2s ease;
     }
    .video-box-wrapper-0 .video-trigger{
        width:216px;
        height:121px;
        position: absolute;
        z-index: 20;
        right: 57px;
        box-shadow: 1px 1px 10px rgba(0,0,0,.3);
        display: block;
        background:url("https://s19.postimg.org/xfh2fdfc3/prev-video-dao_en.jpg") no-repeat;
        top:65px;
        cursor: pointer;
    }
    .vd-box{
        position: fixed;
        top:0;
        left:0;
        width: 100%
        height: 100%;
        z-index: 1999;
        display: none;
    }
    .video-box-wrapper-1{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .video-box-wrapper-1 .video-trigger{
        width:216px;
        height:121px;
        position: absolute;
        z-index: 20;
        right: 57px;
        box-shadow: 1px 1px 10px rgba(0,0,0,.3);
        display: block;
        background:url("https://s19.postimg.org/7xynvrxlv/prev-video-etrans_en.jpg") no-repeat;
        top:203px;
        cursor: pointer;
    }
    .video-box-wrapper-2{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .video-box-wrapper-2 .video-trigger{
        width:216px;
        height:121px;
        position: absolute;
        z-index: 20;
        right: 57px;
        box-shadow: 1px 1px 10px rgba(0,0,0,.3);
        display: block;
        background:url("https://s19.postimg.org/cmenqymsj/prev-video-goldfish_en.jpg") no-repeat;
        top:341px;
        cursor: pointer;
    }
    .video-trigger:hover{
        transform: scale(1.1);
    }
    .video-trigger::after{
        width: 100%;
        height: 100%;
        content: '';
        display: block;
        top:0;
        cursor:pointer;
        background-image: url("https://s19.postimg.org/xlurigogv/video-play.png");
    }
    .modal{
        position: fixed;
        top:0;
        left:0;
        width: 883px;
        height: 497px;
        z-index: 1999;
        display: none;

    }
    .modal-inner{
        background:#fff;
        padding:20px;
        position: absolute;
        transform: scale(1) translate(55px,60px);
        opacity: 1;
        visibility: visible;

    }
    .video-responsive{
        position: relative;
        top:0;
        left:0;
    }
    video{
        width: 883px;
        height: 497px;

    }

    .modal-visible{
        display: block;

    }
    .video-close {
        position: absolute;
        top: 60px;
        right: 0;
        left:958px;
        float:right;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #fff;
        background: #ccc;
        z-index: 1;
        border: none;
    }
    .video-close:hover {
        background: #f00;
    }
<body>
<!-- Ссылки на вызов модальных окон-->
<a href="#win1" class="button-image"><img src="https://s19.postimg.org/wyqsvtl9b/banner.png"/></a>
<a href="#x" class="overlay" id="win1"></a>
    <div class="popup">
        <div class="content">
          <a class="close"  title="Закрыть" href="#close" id="winclose"></a>
            <div id="custom_links" class="custom-links">
                <a href="#" class="custom_links app-store" title="App Store"></a>
                <a href="#" class="custom_links google-play" title="Google Play"></a>
                <a href="#" class="custom_links main-cta" title="CIBC MODERN LIFE"></a>
            </div>

            <div class="video-box-wrapper-0">
                <div class="video-trigger"></div>
            </div>
            <div class="modal">
                <div class="modal-inner">
                    <div class="video-responsive">
                        <video id="video" controls loop>
                            <source src="envideo/CIBC_MPA_15E_ALT.mp4" type="video/mp4"/>
                        </video>
                    </div>
                </div>
                <button class="video-close" title="Close">x</button>
            </div>

            <div class="video-box-wrapper-1">
                <div class="video-trigger"></div>
            </div>
            <div class="modal">
                <div class="modal-inner">
                    <div class="video-responsive">
                        <video id="video1" controls loop>
                            <source src="envideo/CIBC_MPA_15E_ALT.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>p
                <button class="video-close" title="Close">x</button>
            </div>

            <div class="video-box-wrapper-2">
                <div class="video-trigger"></div>
            </div>

            <div class="modal">
                <div class="modal-inner">
                    <div class="video-responsive">
                        <video id="video2" controls loop>
                            <source src="envideo/CIBC_MPA_15E_ALT.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <button class="video-close" title="Close">x</button>
            </div>
        </div>
    </div>
    </body>

https://jsfiddle.net/fmm2xcto/

1 ответ 1

1

Выбирать все элементы - querySelectorAll и подвешивать событие на каждый в цикле:

var preview = document.querySelectorAll('.video-trigger'),
  video = document.querySelector('#video'),
  modal = document.querySelector('.modal'),
  modalClose = document.querySelector('.video-close');

for (var i = 0; i < preview.length; i++) {
  preview[i].onclick = function(e) {
    e.preventDefault();
    modal.classList.add('modal-visible');
    video.play();
  }
}
modalClose.onclick = function() {
  modal.classList.remove('modal-visible');
  video.pause();
}
.button-image {
  float: right;
}


/* Базовые стили слоя затемнения и модального окна  */

.overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: none;
  /* фон затемнения */
  background-color: rgba(0, 0, 0, 0.65);
  position: fixed;
  /* фиксированное поцизионирование */
  cursor: default;
  /* тип курсара */
}


/* активируем слой затемнения */

.overlay:target {
  display: block;
}


/* стили модального окна */

.popup {
  right: 0;
  left: 50%;
  font-size: 14px;
  z-index: 20;
  width: 1030px;
  height: 640px;
  top: 0;
  /* фиксированное позиционирование, окно стабильно при прокрутке */
  position: fixed;
  border: 1px solid #383838;
  background: #fefefe;
  /* внешняя тень */
  -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
  box-shadow: 0 15px 20px rgba(0, 0, 0, .22), 0 19px 60px rgba(0, 0, 0, .3);
  -webkit-transform: translate(-50%, -500%);
  transform: translate(-50%, -500%);
  -webkit-transition: -webkit-transform 0.6s ease-out;
  transition: transform 0.6s ease-out;
}


/* активируем модальный блок */

.overlay:target+.popup {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  top: 10px;
}


/* формируем кнопку закрытия */

.close {
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  position: absolute;
  padding: 0;
  border: 2px solid #ccc;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background-color: rgba(61, 61, 61, 0.8);
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
  e text-align: center;
  text-decoration: none;
  font: 13px/20px 'Tahoma', Arial, sans-serif;
  font-weight: bold;
  -webkit-transition: all ease .8s;
  transition: all ease .8s;
}

.close:before {
  color: rgba(255, 255, 255, 0.9);
  content: "X";
  text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
  font-size: 12px;
}

.close:hover {
  background-color: rgba(252, 20, 0, 0.8);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}


/* изображения внутри окна */

.popup img {
  width: auto;
  height: auto;
}


/* элементы м-медиа, фреймы */

.popup embed,
.popup iframe {
  top: 15px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
}

.popup h2 {
  /* заголовок 2 */
  margin: 0;
  color: #008000;
  padding: 5px 0px 10px;
  text-align: left;
  text-shadow: 1px 1px 3px #adadad;
  font-weight: 500;
  font-size: 1.4em;
  font-family: 'Tahoma', Arial, sans-serif;
  line-height: 1.3;
}


/* параграфы */

.popup p {
  margin: 0;
  padding: 5px 0
}


/*content*/

.content {
  width: 1030px;
  height: 640px;
  background: url("https://s19.postimg.org/e2q693ppf/main-background.jpg") no-repeat;
}

.custom_links {
  display: block;
}

.app-store {
  background-image: url("https://s19.postimg.org/psz1tdc6b/app-store.png");
  position: absolute;
  width: 124px;
  height: 37px;
  left: 435px;
  bottom: 177px;
}

.google-play {
  background-image: url("https://s19.postimg.org/ll49kmaqr/google-play-fr.png");
  position: absolute;
  width: 109px;
  height: 37px;
  right: 332px;
  bottom: 177px;
}

.main-cta {
  background-image: url("https://s19.postimg.org/kk92sm02n/main-cta.png");
  width: 178px;
  height: 80px;
  position: absolute;
  right: 57px;
  bottom: 32px;
  z-index: 10;
}

.app-store,
.google-play {
  z-index: 10;
}

.video-box-wrapper-0 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.video-trigger {
  display: block;
  transition: transform .2s ease;
}

.video-box-wrapper-0 .video-trigger {
  width: 216px;
  height: 121px;
  position: absolute;
  z-index: 20;
  right: 57px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
  display: block;
  background: url("https://s19.postimg.org/xfh2fdfc3/prev-video-dao_en.jpg") no-repeat;
  top: 65px;
  cursor: pointer;
}

.vd-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% height: 100%;
  z-index: 1999;
  display: none;
}

.video-box-wrapper-1 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.video-box-wrapper-1 .video-trigger {
  width: 216px;
  height: 121px;
  position: absolute;
  z-index: 20;
  right: 57px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
  display: block;
  background: url("https://s19.postimg.org/7xynvrxlv/prev-video-etrans_en.jpg") no-repeat;
  top: 203px;
  cursor: pointer;
}

.video-box-wrapper-2 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.video-box-wrapper-2 .video-trigger {
  width: 216px;
  height: 121px;
  position: absolute;
  z-index: 20;
  right: 57px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
  display: block;
  background: url("https://s19.postimg.org/cmenqymsj/prev-video-goldfish_en.jpg") no-repeat;
  top: 341px;
  cursor: pointer;
}

.video-trigger:hover {
  transform: scale(1.1);
}

.video-trigger::after {
  width: 100%;
  height: 100%;
  content: '';
  display: block;
  top: 0;
  cursor: pointer;
  background-image: url("https://s19.postimg.org/xlurigogv/video-play.png");
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 883px;
  height: 497px;
  z-index: 1999;
  display: none;
}

.modal-inner {
  background: #fff;
  padding: 20px;
  position: absolute;
  transform: scale(1) translate(55px, 60px);
  opacity: 1;
  visibility: visible;
}

.video-responsive {
  position: relative;
  top: 0;
  left: 0;
}

video {
  width: 883px;
  height: 497px;
}

.modal-visible {
  display: block;
}

.video-close {
  position: absolute;
  top: 60px;
  right: 0;
  left: 958px;
  float: right;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #ccc;
  z-index: 1;
  border: none;
}

.video-close:hover {
  background: #f00;
}
<body>
  <!-- Ссылки на вызов модальных окон-->
  <a href="#win1" class="button-image"><img src="https://s19.postimg.org/wyqsvtl9b/banner.png" /></a>
  <a href="#x" class="overlay" id="win1"></a>
  <div class="popup">
    <div class="content">
      <a class="close" title="Закрыть" href="#close" id="winclose"></a>
      <div id="custom_links" class="custom-links">
        <a href="#" class="custom_links app-store" title="App Store"></a>
        <a href="#" class="custom_links google-play" title="Google Play"></a>
        <a href="#" class="custom_links main-cta" title="CIBC MODERN LIFE"></a>
      </div>

      <div class="video-box-wrapper-0">
        <div class="video-trigger"></div>
      </div>
      <div class="modal">
        <div class="modal-inner">
          <div class="video-responsive">
            <video id="video" controls loop>
                            <source src="envideo/CIBC_MPA_15E_ALT.mp4" type="video/mp4"/>
                        </video>
          </div>
        </div>
        <button class="video-close" title="Close">x</button>
      </div>

      <div class="video-box-wrapper-1">
        <div class="video-trigger"></div>
      </div>
      <div class="modal">
        <div class="modal-inner">
          <div class="video-responsive">
            <video id="video1" controls loop>
                            <source src="envideo/CIBC_MPA_15E_ALT.mp4" type="video/mp4">
                        </video>
          </div>
        </div>p
        <button class="video-close" title="Close">x</button>
      </div>

      <div class="video-box-wrapper-2">
        <div class="video-trigger"></div>
      </div>

      <div class="modal">
        <div class="modal-inner">
          <div class="video-responsive">
            <video id="video2" controls loop>
                            <source src="envideo/CIBC_MPA_15E_ALT.mp4" type="video/mp4">
                        </video>
          </div>
        </div>
        <button class="video-close" title="Close">x</button>
      </div>
    </div>
  </div>
</body>

2
  • а что на счет плавного перехода??
    – Anton
    21 сен 2017 в 11:57
  • и еще одна проблема в вашем решении в том что , когда я добавляю другие видео файлы то они не воспроизводятся , я вместо них проигрывается только первое видео
    – Anton
    21 сен 2017 в 12:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.