Блог

Я пытаюсь работать на веб-странице, на которой при нажатии на тег изображения я должен иметь возможность показывать скрытое видео. Я использовал рули. Я также хочу закрыть это видео, когда какой-либо пользователь нажимает на другую фотографию.

     <script type = "text/x-handlebars-template" id = "template">
            <div class = "row row-eq-height">
                {{#each images}}
                    <div class = " col-xs-12 col-md-3">
                        <div class = "thumbnail">
                            <img src = "{{src}}" style = "width : 50%;height :25%;" 
                             onClick = document.getElementById("video").style.display = "block";/>
                            <iframe style = "display:none;" id = "video" src = "{{video}}"/>
                            <h3>{{Song}}</h3>
                        </div>
                    </div>
                {{/each}}
            </div>
    </script>   
  

Это не работает, видео скрыты, но они не отображаются обратно, когда я нажимаю на фотографию.

Пожалуйста, не стесняйтесь задавать вопросы, если вам нужно больше ясности в моем запросе.
Любая помощь приветствуется. Заранее спасибо.

Для достижения лучшей производительности я предлагаю вам просто создать все, кроме iframe. Когда кто-то нажимает на миниатюру видео, создайте iframe на лету и добавьте к родительскому. Если вы сделаете это, вам не придется скрывать видео и пытаться их отобразить.

 <div class="video-container" data-video="{{video}}">
  <div class="video-overlay" onclick="fetchVideo()">
    <img src = "{{src}}" class="video-thumbnail"/>
    <h3>{{Song}}</h3>
  </div>
  <div class="video-player"></div>
</div>
  

 .video-player {
 // this is iframe container
}
.video-overlay {
  // syles
  transition: opacity 0.3s ease-out;
}
.video-thumbnail {
  width : 50%;
  height: 25%;
  object-fit: cover;
}
.hidden {
  opacity: 0;
}
  

 function fetchVideo() {
  let parent = event.target.parentElement;
  let video = parent.dataset.video;
  let iframe = `<iframe width="560" height="315" src="${video}" frameborder="0" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>`;
  let player = event.target.nextElementSibling;
  player.insertAdjacentHTML('beforeend', iframe);
  event.target.classList.add("hidden");
}