Mami pregunta: Cómo insertar un vídeo de Youtube en webs de centros escolares en edu.xunta.es (plataforma Drupal)

En los colegios públicos de Galicia, tienen acceso a una plataforma para que cada centro pueda tener su propia página web dentro de edu.xunta.es. Esta plataforma está basada en Drupal y, en esta publicación, voy a indicar paso a paso cómo insertar un vídeo de Youtube en una publicación en esa plataforma.

Existen otras formas de insertar un vídeo de youtube, pero creo que esta es la más sencilla.

Lo primero que vamos a hacer, es irnos a Youtube y elegir un vídeo. En mi caso, he elegido el vídeo "As pousadeiras do rei" de la EEI Sarria, por haber sido el ganador del último concurso de Nós tamén creamos de la CRTVG.

Una vez que estemos viendo el vídeo que queremos insertar, vamos a copiar el final de la dirección, que es lo que hay tras lo de "?v=". En nuestro caso, la dirección es https://www.youtube.com/watch?v=3l8CsCam3bw, con lo que copiaremos solamente 3l8CsCam3bw.
Ahora que ya hemos copiado todo lo necesario, vamos a acceder a nuestra plataforma e insertar el vídeo.

Empezamos por ir a la web de nuestra escuela, siempre son en formato http://www.edu.xunta.es/centros/nombredelaescuela, donde nombredelaescuela es el nombre que tiene tu centro. En mi caso, en las imágenes, veremos que utilizo el nombre genérico escola (escuela en gallego).

Una vez que estemos en nuestra web, pulsaremos en Acceder:


Se nos solicitará poner nuestro usuario y contraseña. Cubrimos los datos y pulsamos en Iniciar sesión:

Ya con la sesión iniciada, pulsaremos sobre el nombre de nuestro colegio para irnos a la página principal, que es donde voy a insertar el vídeo (el proceso sería el mismo para cualquier otra sección de la web):


Ahora ya podemos ver nuestra página principal:


Ahora tenemos que pulsar una vez sobre el título de la página para ver las opciones que tenemos:


Tras haber pulsado sobre el título de la página, debemos pulsar en la pestaña Editar:


En la pestaña Editar, veremos lo siguiente:


Vamos un poco hacia abajo hasta llegar al editor y, una vez ahí, pulsaremos el botoncito de Vídeo, que vemos a la derecha del todo de la barra de herramientas del editor. He aprovechado a escribir una pequeña descripción. Ojo, debemos colocar el cursor donde queremos colocar el vídeo antes de pulsar el botón (aunque siempre puede moverse de sitio más tarde).


Al pulsar el botón de insertar vídeo, se nos abrirá una nueva ventana por encima. Debemos pulsar en la pestaña Fonte (fuente) para indicar el "código fuente" que nos permitirá insertar el reproductor de Youtube directamente en la página:
Una vez que estemos en dicha pestaña, debemos insertar el código siguiente:

<iframe allowfullscreen="" frameborder="0" height="270" src="//www.youtube.com/embed/trozodelawebdeyoutube" width="480"></iframe>

Evidentemente, donde pone trozodelawebdeyoutube, tenemos que poner el código que habíamos copiado al principio del todo y que, recordemos, era todo lo que había tras el "?v=" de la dirección del vídeo en youtube.

En mi caso particular, quedaría así:

<iframe allowfullscreen="" frameborder="0" height="270" src="//www.youtube.com/embed/3l8CsCam3bw" width="480"></iframe>

Se pueden editar varios valores, como height para el alto y width para el ancho, pero estos son los valores estándar.

Una vez sustituido el trozo, quedaría como en la siguiente imagen. Sólo faltaría pulsar el botón Insertar para añadirlo a nuestra web:

Veremos un rectángulo amarillo en el lugar que ocupará el vídeo:


Para ver el resultado, debemos desplazarnos al fondo de la página y pulsar el botón de Vista Previa:


Y así es cómo quedaría ya nuestro reproductor de Youtube insertado la web de nuestro centro:


Si nos gusta el resultado, sólo tenemos que pulsar el botón Gardar, en vez de utilizar el de Vista Previa y ya quedarán fijados permanentemente los cambios.

Espero que os haya sido de ayuda este tutorial y que dejéis más bonitas las webs de vuestros colegios.

Un saludo: Roi

Comentarios

Entradas populares de este blog

Cómo configurar dos PLCs

Configurar correo IMAP de mundo-R en Android

Arduino y Processing 3: Mostrar los datos de dos sensores al mismo tiempo