вопрос
Привет, я решил сделать на сайте небольшой горизонтальный блок с последними видеозаписями со своего канала. Чтобы не делать отдельный пост для каждого ролика, да и это тупо при клике на видео переходить на пост а потом только открывать видео, я решил реализовать это через модальное окно. Нашел неплохую статью, где предлагают следующий код:
Т.е картинка, на нее кликаешь и выезжает видеозапись в модальном окне. Вопрос заключается в том, можно ли как-то реализовать это на сайте, не прописывая к каждому ролику отдельный css и js?
<style>
img[src$="/mqdefault.jpg"] + iframe {
position: fixed;
z-index: 11;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-box-sizing: border-box; box-sizing: border-box;
border: solid rgba(0,0,0,.3);
border-width: 5vh 5vw;
}
</style>
<img title="видео: переправа" alt="переправа" src="http://img.youtube.com/vi/JMJXvsCLu6s/mqdefault.jpg" height="180" width="320" class="tr-caption-container"/>
<script>
var img = document.querySelectorAll('img[src$="/mqdefault.jpg"]');
for (var i = 0; i < img.length; i++) {
img[i].onclick = function() {
var idImg = this.src.replace(/http...img.youtube.com.vi.(.*?).mqdefault.jpg/gi, '$1');
theIframe = document.createElement('iframe');
theIframe.src = '//www.youtube.com/embed/' + idImg + '?rel=0&autoplay=1';
theIframe.onclick = function () {this.parentElement.removeChild(this);};
this.parentNode.insertBefore(theIframe, this.nextSibling);
}
}
</script>
Т.е картинка, на нее кликаешь и выезжает видеозапись в модальном окне. Вопрос заключается в том, можно ли как-то реализовать это на сайте, не прописывая к каждому ролику отдельный css и js?
