Si quieres listar vídeos de YouTube en tu sitio web, necesitas acceder a la API de la plataforma. En tutoriales anteriores vimos cómo acceder a la API de YouTube con una librería para obtener distintos vídeos de la plataforma de hosting para vídeos. Al utilizar esta librería, podremos obtener recursos de YouTube como vídeos, listas de reproducción, canales y demás. En este artículo, te mostraré el código para obtener un listado de vídeos de YouTube mediante keywords.
En este ejemplo, obtendremos las distintas keywords mediante una caja de texto. Es decir, el usuario se encargará de filtrar los vídeos introduciendo keywords en dicha caja de texto. Cuando el usuario introduzca una keyword, buscaremos vídeos en YouTube mediante la librería de la API de YouTube y los obtendremos. Más tarde, crearemos una galería de vídeos con lo resultado.
En PHP comprobaremos si el keyword introducido no está vacío, y procederemos a realizar la búsqueda con la librería para obtener los vídeos. He definido un número máximo de resultados en una constante de PHP y enviaremos este valor a la llamada de la API. Cómo no, agregaremos a la llamada también el keyword introducido por el usuario.
Filtro de keywords en HTML
He creado un filtro HTML para buscar vídeos por keywords. El usuario podrá enviar keywords para filtrar vídeos. Validaremos la keyword en el lado del servidor antes de realizar la llamada de la API. Después de enviar el formulario, si no se encuentra ningún valor en el input de la keyword, mostraremos un error en la web . De lo contrario, la keyword se enviará con la llamada API y los videos relacionados se mostrarán en una galería. En la llamada API, enviaremos la keyword en el parámetro q.
<?php
if (isset($_POST['submit']) )
{
$keyword = $_POST['keyword'];
if (empty($keyword))
{
$response = array(
"type" => "error",
"message" => "Please enter the keyword."
);
}
}
?>
<h2>Search Videos by keyword using YouTube Data API V3</h2>
<div class="search-form-container">
<form id="keywordForm" method="post" action="">
<div class="input-row">
Search Keyword : <input class="input-field" type="search"
id="keyword" name="keyword"
placeholder="Enter Search Keyword">
</div>
<input class="btn-submit" type="submit" name="submit"
value="Search">
</form>
</div>
<?php
if(!empty($response)) {
?>
<div class="response <?php echo $response["type"]; ?>
">
<?php echo $response["message"]; ?>
</div>
<?php
}
?>
Solicitud cURL para obtener los vídeos de YouTube
En el siguiente script, solicitamos acceso a YouTube Data API V3 para obtener videos por keyword. Después de obtener los datos remotos, la respuesta CURL devolverá los datos de los videos. Parsearemos la respuesta CURL para obtener el título del video y la descripción en la galería.
<?php
if (isset($_POST['submit']) )
{
if (!empty($keyword))
{
$apikey = 'YOUR API KEY';
$googleApiUrl = 'https://www.googleapis.com/youtube/v3/search?part=snippet&q=' . $keyword . '&maxResults=' . MAX_RESULTS . '&key=' . $apikey;
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $googleApiUrl);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_VERBOSE, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
$response = curl_exec($ch);
curl_close($ch);
$data = json_decode($response);
$value = json_decode(json_encode($data), true);
?>
<div class="result-heading">About <?php echo MAX_RESULTS; ?> Results</div>
<div class="videos-data-container" id="SearchResultsDiv">
<?php
for ($i = 0; $i < MAX_RESULTS; $i++) {
$videoId = $value['items'][$i]['id']['videoId'];
$title = $value['items'][$i]['snippet']['title'];
$description = $value['items'][$i]['snippet']['description'];
?>
<div class="video-tile">
<div class="videoDiv">
<iframe id="iframe" style="width:100%;height:100%" src="//www.youtube.com/embed/<?php echo $videoId; ?>"
data-autoplay-src="//www.youtube.com/embed/<?php echo $videoId; ?>?autoplay=1"></iframe>
</div>
<div class="videoInfo">
<div class="videoTitle"><b><?php echo $title; ?></b></div>
<div class="videoDesc"><?php echo $description; ?></div>
</div>
</div>
<?php
}
}
}
?>