Я создаю видео-галерею с использованием идентификаторов YouTube на тему WordPress. Идея состоит в том, чтобы создать систему, в которую клиенты могут загружать идентификаторы YouTube, а шаблон генерирует видеогалерею, используя этот идентификатор. Я построил его довольно хорошо, используя пользовательские поля pods и создал шаблон. Это будет только один шаблон, будут другие, где это не миниатюра, а ссылка на кнопку с привязкой к видео, а также другой шаблон с видео слайдером.
Что касается этого шаблона, существует несколько миниатюр, по которым можно щелкнуть, чтобы открыть модал с помощью начальной загрузки. Модал это видео. Все это прекрасно работает.
Единственное, с чем мне трудно разобраться, это как внешняя ссылка на модал. Если кто-то печатает - website.com/video-gallery#video1, на этой странице должно появиться модальное изображение с video1. Я становлюсь неопределенным и не уверен, что лучший способ это сделать.
Я попытался поиграть с данными target и href. Я не хочу много модалов, я хотел только один модал, который генерирует новые данные при каждом клике. таким образом, несколько видео не загружаются одновременно.
[pods name="video" limit="-1" ]
<div class="video-wrap col col-sm-3">
[if vp-video-image]
<a class="video-container" data-embed="{@vp-youtube-id}" data-toggle="modal" data-target="#player" href="#{@post_name}" style="background-image: url({@vp-video-image._src})"></a>
[/else]
<a class="video-container" data-embed="{@vp-youtube-id}" data-toggle="modal" data-target="#player" href="#{@post_name}"></a>
[/if]
<h3 class="vp-title">{@vp-video-title}</h3>
[/pods]
<!-- Modal -->
<div class="modal fade" id="{@vp-youtube-id}" tabindex="-1" role="dialog" aria-labelledby="player" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always" allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$(document).ready(function() {
var imageBox = document.querySelectorAll('.video-container');
for (var i = 0; i < imageBox.length; i++) {
var source = "https://img.youtube.com/vi/" + imageBox[i].dataset.embed + "/sddefault.jpg";
var image = new Image();
image.src = source;
$(imageBox[i]).css('background-image', 'url(' + image.src + ')');
};
$(window).load(function() {
setTimeout(function() {
$(window.location.hash).modal('show');
}, 5000);
});
var youtube = document.querySelectorAll('.player');
var $videoSrc;
$('.video-container').click(function() {
$videoSrc = $(this).data( "embed" );
});
console.log($videoSrc);
$('.modal').on('shown.bs.modal', function(e) {
window.location.hash = $(this).data( "embed" );
$("#video").attr('src',"https://www.youtube.com/embed/" + $videoSrc + "?autoplay=1&modestbranding=1&showinfo=0" );
});
function revertToOriginalURL() {
var original = window.location.href.substr(0, window.location.href.indexOf('#'))
history.replaceState({}, document.title, original);
}
$('.modal').on('hidden.bs.modal', function() {
$("#video").attr('src','');
revertToOriginalURL();
});
$('.close').click(function() {
$("#video").attr('src','');
revertToOriginalURL();
});
});
<style>
body {
font-variant-ligatures: none;
-webkit-font-variant-ligatures: none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
}
.vp-title {
font-size: 16px;
color: #000;
font-weight: 600;
padding: 10px 0 0 0;
text-align: left;
height: 60px;
}
.video-container {
background-color: #000;
margin-bottom: 0;
position: relative;
padding-top: 56.25%;
overflow: hidden;
cursor: pointer;
background-size: cover;
background-position: center center;
display: block;
}
.video-container:after,
.video-container:before {
content: "";
position: absolute;
top: 15%;
left: 10%;
}
.video-container:after {
width: 0;
height: 0;
border: 11px solid transparent;
border-left: 18px solid #fff;
margin-top: 9px;
margin-left: 13px;
-webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));
}
.video-container:before {
width: 40px;
height: 40px;
border: 0 solid #fff;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
background: rgba(0, 193, 222, 0.70);
}
.modal-dialog {
max-width: 100%;
margin: 30px auto;
}
.modal-body {
position: relative;
padding: 0px;
}
.close {
position: absolute;
right: -30px;
top: 0;
z-index: 999;
font-size: 2rem;
font-weight: normal;
color: #fff;
opacity: 1;
}