he creado foreach que me da 5 videos, con sus iconos decorativos y demas.
<?php foreach ($preview as $previews): ?>
<div class="column is-one-fifth">
<div class="video">
<a href="<?php echo $previews['volles-video']; ?>" data-video>
<video loop muted data-poster="<?php echo $previews['poster']; ?>">
<source src="<?php echo $previews['mp4']; ?>" type="video/mp4">
<source src="<?php echo $previews['kurzes-video']; ?>" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="video-logo">
<img src="<?php echo $previews['icon']['sizes']['large']; ?>"
alt="<?php echo $previews['icon']['alt']; ?>"/>
</div>
<div class="is-flex tag-icon">
<span>Video</span>
<object data="<?php echo get_template_directory_uri(); ?>/images/play-icon.svg"
type="image/svg+xml"></object>
</div>
</a>
</div>
<?php if ($previews['icon']): ?>
<h3><?php echo $previews['title']; ?></h3>
<?php endif; ?>
</div>
<?php endforeach; ?>
Luego he usado un codigo javascript para ejecutar un hovertoplay:
var figure = $(".video").hover(hoverVideo, hideVideo);
function hoverVideo(e) {
$('video', this).get(0).play();
if (document.documentElement.clientWidth < 900) {
$('video', this).get(0).pause();
}
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
Y luego para que el video fuera clickable y visible, he creado una funcion en jquery que hace un lightbox basicamente. Intente usar lity, pero no es compatible con safari y da muchos problemas, asi que opte por hacerlo por mi cuenta.
$(document).ready(function () {
$('a[data-video]').each(function () {
$(this).on('click', function (e) {
e.preventDefault();
$('body').append('<div id="video-lightbox">' +
'<div>' +
'<video controls>' +
'<source src="' + $(this).attr('href') + '" type="video/mp4">' +
'Ihr Browser unterstützt das gegebene Video-Format leider nicht.' +
'</video>' +
'<div id="close-video-lightbox">X</div>' +
'</div>' +
'</div>');
$('#video-lightbox video').get(0).play();
/*$('#video-lightbox > div').on('click', function(){
$('#video-lightbox').hide().remove();
});*/
$('#close-video-lightbox').on('click', function () {
$('#video-lightbox').hide().remove();
});
$(document).keydown(function(e) {
// ESCAPE key pressed
if (e.keyCode === 27) {
$('#video-lightbox').hide().remove();
}
});
});
})
});
Como veis, a travez de data.video genero el lightbox deseado para el video. El problema es que en todos los navegadores me sale los controls del video menos en chrome. La consola de navegador no da ningun tipo de error y el vcalidador de w3 tampoco. He probado varias cosas, como ponerle control al video principal o ponerle mute al video del lightbox y alguna cosillas mas sin importancia pero nada, no hay manera de que la barra de control aparezca en google chrome. Alguien sabe cual podria ser el problema? Gracias