Tengo el siguiente código
$(document).ready(function(){
$('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/qK0w8PmpA8Q" frameborder="0" allowfullscreen></iframe>');
$('#img1').click(function(){
$('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/Ta9niDCU7wg" frameborder="0" allowfullscreen></iframe>');
})
$('#img2').click(function(){
$('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/01d5ajDJOwE" frameborder="0" allowfullscreen></iframe>');
})
$('#img3').click(function(){
$('.video_display').html('<iframe width="388" height="263" src="https://www.youtube.com/embed/db-EZlBDRE0" frameborder="0" allowfullscreen></iframe>');
})
})
.imagen-previa-video {
list-style: none;
margin: 0;
padding: 0;
}
.imagen-previa-video li{
float: left;
margin-right: 5px;
}
.imagen-previa-video li img{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="test" class="video_display"></div>
<ul class="imagen-previa-video">
<li id="img1"><img src="https://dummyimage.com/150x110/8a8a8a/fff" alt="Test" /></li>
<li id="img2"><img src="https://dummyimage.com/150x110/8a8a8a/fff" alt=" " /></li>
<li id="img3"><img src="https://dummyimage.com/150x110/8a8a8a/fff" alt=" " /></li>
</ul>
<ul class="list-id-videos" style="display:none">
<li>Ta9niDCU7wg</li>
<li>01d5ajDJOwE</li>
<li>db-EZlBDRE0</li>
</ul>
Quiero conseguir hacer una galeria de videos, que eligiendo el cliente el número de videos según los que tenga, solo deba subir una imagen previa y el id del video de Youtube
, entonces via jQuery
se relacione.
Si tiene 2 videos tiene que subir 2 imagenes y poner los 2 ID de videos de Youtube
, si tiene 3 videos, pues 3 imágenes y 3 Id's, etc.
¿Alguna ayuda por aquí? Muchas gracias de antemano.