Solemos utilizar las miniaturas para mostrar la vista previa de uno o varios contenidos multimedia en la ventana del explorador. Mediante las miniaturas, estamos informando al usuario de lo que se va a encontrar antes de adentrarse en el contenido en cuestión. En el desarrollo web también se utilizan las miniaturas para el mismo cometido. Por ejemplo, las tiendas online muestran las imágenes de sus productos mediante miniaturas. Además del propósito de informar al usuario, también reducen muy mucho el tiempo de carga en dichos casos. Las plataformas de vídeo también muestran miniaturas para que el usuario sepa, sin ver el vídeo, de lo que puede tratar.
En este tutorial, mostraremos la miniatura de un vídeo de YouTube simplemente con su URL. La URL la recibiremos a través de un campo input que agregaremos a un formulario. Ya en PHP, extraeremos el ID del vídeo y lo utilizaremos para conformar la URL de la miniatura. Si quieres mostrar la miniatura dentro de una galería de tus vídeos favoritos de YouTube, puedes utilizar también este ejemplo.
Obteniendo la URL del vídeo a través de un formulario
Utilizaremos este código HTML para que el usuario pueda ingresar la URL del vídeo de YouTube. Después del envío del formulario, procesaremos la URL en el script PHP para mostrar la miniatura de la imagen.
<h2>Show Image Thumbnail by YouTube Video URL using PHP</h2>
<div class="frm-video-image-thumbnail">
<form method="post" action="">
<input class="input-field" type="text" name="url"
placeholder="Enter URL"><br /> <br /> <input
class="btn-submit" type="submit" name="submit"
value="Submit">
</form>
<div class="thumbnail">
<?php
if (! empty($videoId)) {
?>
<h3 class="thumb-head">Thumbnail Image:</h3>
<img
src="https://img.youtube.com/vi/<?php echo $videoId; ?>/hqdefault.jpg"
width="250" />
<?php
}
?>
</div>
</div>
Confeccionar la URL de la miniatura mediante la URL de YouTube
El código PHP lee la URL del vídeo que hemos recibido a través del formulario HTML. Para ello extraemos el ID único del vídeo mediante la función explode(). Una vez que tenemos el ID del vídeo lo almacenamos la variable $videoID para después utilizarla en nuestro HTML y así, mostrar la imagen.
<?php
if (isset($_POST['submit'])) {
$url = $_POST['url'];
$value = explode("v=", $url);
$videoId = $value[1];
}
?>