Dispongo de grupo de datos en PHP con 5 elementos dentro cada grupo, entre ellos una imagen. Luego dispongo de un vídeo sin póster por que tiene hover to play implementado, el problema es que Safari en dispositivos móviles bloquea esto y se me ha ocurrido la ide ade a partir de 900px añadirle el poster, el código lo tengo casi, pero me añade el póster pero no la imagen, y creo que es por que esta mal hecha la linea. Aquí dejo el código donde contiene los datos. (es usando ACF en wordpress)
$preview = get_field('homepage-videos');
Y este es el vídeo con el script.
<div class="video">
<video class="thevideo" loop muted>
<source src="<?php echo $previews['volles-video']; ?>" type="video/mp4">
<source src="<?php echo $previews['kurzes-video']; ?>" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<script>
if (document.documentElement.clientWidth < 900) {
$('.video video').attr('poster', "<?php echo $previews['poster']['sizes']['large']; ?>");
}
</script>
Y esto es lo que me muestra el DevTools de chrome
<video class="thevideo" loop="" muted="" poster="">
<source src="http://www.die-lounge.com/test/dlb/wp-
content/uploads/2019/01/VerifiableTerrificHind.mp4" type="video/mp4">
<source src="http://www.die-lounge.com/test/dlb/wp-
content/uploads/2019/01/VerifiableTerrificHind.webm" type="video/webm">
Your browser does not support the video tag.
</video>
¿Alguien me puede indicar que falla a la hora de añadir el póster? Gracias.
NOTA
El problema que tengo y el por que quiero poner esto es el siguiente: El video tiene un sistema de hover to play implementado tipo youtube, el tema es que en responsive no hay hover y lo que hice fue hacer un scrollontop, pero por alguna razón, en safari no muestra los videos, solo se ve un icono que tiene cada video y lo demas en blanco. Entonces mi idea es que para mobiles, se muestre el poster. De hecho lo que quiero hacer es que el poster este inactivo por encima de los 900px y a partir de 900px el poster sea visible, pero no lo logo ni a la de tres.
NOTA 2
He intentado saltarme jquery y hacerlo con javascript.
$(document).ready(function () {
if (document.documentElement.clientWidth < 900)
var url = "<?php echo $previews['poster']; ?>";
document.getElementsByClassName("thevideo").poster = url;
});
Pero nada, los resultados son los mismos, he probado a poner con doble comilla, con simple comilla, sin comilla y lo unico que logro es que se añada el atributo poster="" pero la url no va, he hecho console.warn a la url en php y me la da correcta, pero por alguna razon que no entiendo no la añade a la etiqueta poster. Tambien en revisado que variable contenga info con un var_dump, todo correcto. Sin embargo si meto la url de la variable directamente a mano o cualquier otra, me la muestra perfectamente.
NOTA 3
He intentado usando, en vez de attr();, meter background-image por jquery, añadirle una clase con backgroud, usar id´s para referenciar cada elemento que se repite en el foreach...Al final el resultado siempre es el mismo, jquery capta la url, pero lo pasa a html, es decir, si inspecciono el código, veo la url en la función jquery, pero luego en el video tag se refleja poster="" o background-image: url(""). Ya no se que hacer
thevideo
y en el jquery buscas la clasevideo
<?php echo $previews['poster']['sizes']['large']; ?>;
<?php echo $previews['poster']['sizes']['large']; ?>
?