Cómo Embeber Youtube En Una Aplicación Ionic

Cómo embeber Youtube en una aplicación Ionic

Que pasa churritas?

Hoy vengo con un post técnico y corto, una chuleta de referencia en el desarrollo de aplicaciones móviles hechas con el framework Ionic. Anteriormente, en otros posts ya he hablado de este framework.

Si todavía no sabes qué es o no has empezado a juguetear con el puedes leerte este post sobre cómo crear una app con Ionic, si ya has hecho algo puedes leer otro post un poco mas técnico sobre cómo consumir un webservice desde AngularJS.

En cualquier caso, en este post vamos a ver cómo embeber un vídeo de youtube en una aplicación móvil hecha con Ionic y lo más importante, que funcione cuando hagamos el build de la app y la distribuyamos en el market.

Cómo embeber youtube en una aplicación Ionic

Hago este post porque en uno de los últimos desarrollos que estoy haciendo tuve que insertar el iframe de Youtube en la aplicación móvil y vale, lo lógico parece insertar el código que nos da el mismo Youtube cuando vemos un vídeo dentro del html de nuestra aplicación Ionic y a correr.

Si hacemos esto obviamente nos funcionará cuando estamos desarrollando y al haer un ionic serve para ver la aplicación en el navegador podremos disfrutar sin ningún tipo de restricción del vídeo de Youtube. Esto es porque al estar en local y con conexión directa a Internet no hay ningún problema en realizar dicha conexión a Youtube pero el problema viene cuando intentamos seguir este mismo paso una vez que ya hemos empaquetado y firmado la aplicación y la ésta ya se encuentra instalada en un dispositivo.

Iframe de Youtube en HTML

Y es que Android tiene unas políticas de seguridad que por defecto bloquea todas las conexiones saliente que realice tu app a no ser que indiques lo contrario.

Pues bien, para poder llevar a cabo esto y dar permisos de conexión a Youtube a nuestra app tenemos que hacer varias cosillas:

  • Instalar el plugin cordova-plugin-whitelist
  • Hacer un filtro trusteer
  • Dar estilos

Instalando el plugin de Whitelist

Según su documentación oficial:

Listas blancas de dominio es un modelo de seguridad que controla el acceso a dominios externos sobre los cuales su aplicación no tiene ningún control. Cordova ofrece una política de seguridad configurable para definir los sitios externos pueden accederse. De forma predeterminada, nuevas aplicaciones están configurados para permitir el acceso a cualquier sitio. Antes de su aplicación a la producción, debe formular una lista blanca y permitir el acceso a la red específica dominios y subdominios.

Ya estes haciendo la aplicación con Apache Cordova o con el framework Ionic, tendrás que indicarle a la app los dominios a los que quieres dar permiso para hacer una conexión saliente, esto se hace definiendo la política de acceso en el fichero config.xml de la siguiente manera:

<access origin="http://youtube.com">

En cualquier caso, para instalar este plugin con ejecutar el siguiente comando será mas que suficiente:

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

Bien, el siguiente paso es crear un filtro que haga de Trusteer con los dominios a utilizar.

Hacer un filtro que haga de Trusteer con los dominios a utilizar xD

Este es el código que utilizaremos para hacer el filtro trusteer:

.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

Cómo veis, utilizamos el objeto $sce. Realmente $sce es un servicio que nos provee de un mecanismo para darle a AngularJS los bindings necesarios en un contexto concreto los valores que han de ser marcados como seguros para ese contexto. El contexto en este caso es la aplicación y el valor del binding es Youtube por lo que con esto le estamos diciendo a AngularJS que Youtube es un origen confiable y seguro para nuestra aplicación.

Dándole estilos al reproductor de Youtube

Por último para que el iframe sea totalmente responsive en nuestra aplicación tenemos que darle ciertos estilos porque sino a lo mejor en un dispositivo de 5 pulgadas se ve de puta madre pero cuando pasamos a una table de 10 pulgadas el reproductor se va a la wea. Así que copiad los siguientes estilos:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Y con esto es todo, si has seguido el tutorial al pie de página ya serás capaz de embeber vídeos de Youtube en tus aplicaciones Ionic/AngularJS pero recuerda que el servicio $sce no solo funciona con Youtube, funciona con cualquier origen que indiques, no es algo exclusivo del gigante de contenidos multimedia.

En un par de días liberaré el código de la aplicación que decía que estaba haciendo y en la que utilizo el servicio $sce y los iframes de Youtube para que podáis echarle un vistazo.

En cualquier caso, si te has liado con el post o tienes cualquier duda puedes utilizar este banner para preguntarme a través de Twitter.

@gorkakatua #faqsGorkamu pregúntame por twitter cualquier cosa y vemos cómo lo solucionamos.

Y sin más…

Hala a cascarla!!

¿Te ha parecido este un artículo de 5 estrellas? Dame tu valoración:
Review Date
Reviewed Item
Cómo embeber youtube en una aplicación Ionic
Author Rating
51star1star1star1star1star

Gorka Muñoz Andrés

Me llamo Gorka Muñoz y soy un desarrollador melómano. Combino a la perfección la búsqueda de nuevos grupos con la pasión por la tecnología. Desde chiquitito me ha gustado la programación, ahora que soy mayor estoy metido en el mundo del SEO sin olvidarme del /Dev.

This Post Has 2 Comments

  1. Erlin Andres Vazquez Castellanos

    Saludos, Tengo una pregunta acerca de como reproducir videos de youtube como los de VEVO que tienen algunas url en lista negra (1NHoc2iMB6w este por ejemplo) que tienen el dichoso error de restriccion de contenido. Estuve investigando y todo parece indicar a que las apps creadas con Cordova no envian el HTTP REFERER por ende youtube no logra identificar la url origen y el video queda bloqueado a la app.

    Gracias de antemano.

    1. Gorka Muñoz Andrés

      No sé si termino de entenderte… ¿Quién tiene las urls en una lista negra? Cordova tiene un plugin de whitelist, aunque imagino que ya lo habrás mirado…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *