Luis Mojica

ProfesorPregunta

Anterior: ⏪ Tablas y listas tan facil como nunca lo has visto ☑️

==«==

" Esta publicación forma parte de una serie denominada: 🇪🇸 ✍️💡 Escribe textos geniales con Markdown 👨‍🎨👩‍🎨. Si has llegado aquí sin pasar por allí, te recomiendo visitarla, donde encontraras el índice principal. "

==»==

📺 Incrustar videos

YouTube en Platzi

Para incrustar o insertar videos, es decir, que se puedan reproducir allí mismo sin que el lector deba ir a otra página, deberemos utilizar la siguiente sintaxis:

==«==

@youtube

==» El código anterior producirá:»==

@youtube

Vimeo en Platzi

==«==

@vimeo

==» El código anterior producirá: »==

@vimeo

Insertar miniatura con enlace al video (Funciona en todas partes incluido GitHub)

Valga la aclaración que con este método no es necesario descargar la thumbnail, pues la etiqueta está escrita para que la tome automáticamente de la API de Youtube.

Usando Youtube API

Nombre de miniatura	Tamaño (px)	URL
Player Background	480x360	https://i1.ytimg.com/vi/«ID»/0.jpg
Start	120x90	https://i1.ytimg.com/vi/«ID»/1.jpg
Middle	120x90	https://i1.ytimg.com/vi/«ID»/2.jpg
End	120x90	https://i1.ytimg.com/vi/«ID»/3.jpg
High Quality	480x360	https://i1.ytimg.com/vi/«ID»/hqdefault.jpg
Medium Quality	320x180	https://i1.ytimg.com/vi/«ID»/mqdefault.jpg
Normal Quality	120x90	https://i1.ytimg.com/vi/«ID»/default.jpg

==«==

[start]: https://i1.ytimg.com/vi/ZYmIUiK8ZQI/1.jpg "start"
[middle]: https://i1.ytimg.com/vi/ZYmIUiK8ZQI/2.jpg "middle"
[end]: https://i1.ytimg.com/vi/ZYmIUiK8ZQI/3.jpg "end"
[hqdefault]: https://i1.ytimg.com/vi/ZYmIUiK8ZQI/hqdefault.jpg "hqdefault"
[mqdefault]: https://i1.ytimg.com/vi/ZYmIUiK8ZQI/mqdefault.jpg "mqdefault"
[default]: https://i1.ytimg.com/vi/ZYmIUiK8ZQI/default.jpg "default"
[urlYoutube]: https://www.youtube.com/watch?v=ZYmIUiK8ZQI "Titulo del video"


[![x][start]][urlYoutube] [![x][middle]][urlYoutube] [![x][end]][urlYoutube] [![x][default]][urlYoutube] [![x][mqdefault]][urlYoutube] [![x][hqdefault]][urlYoutube] [![x][background]][urlYoutube]

==» El Código anterior producirá:==

Usando Vimeo API

Lo primero que debemos observar es la ID publica 128154222 y con ella realizamos el llamado a la api para obtener los datos del video, puedes elegir el formato que gustes

Para este ejemplo hemos realizado la llamada al archivo json, y luego de pasarlo por jsonbeautifier obtenemos

[
 {
   "id": 128154222,
   "title": "Lytro Test Video",
   "description": "A sample video create from a single still photo snapped with the Lytro Illum. Read our full review of the Illum here: http://bit.ly/1EXnxU8  © >David Patiño",
   "url": "https://vimeo.com/128154222",
   "upload_date": "2015-05-18 11:22:34",
   "thumbnail_small": "http://i.vimeocdn.com/video/519177743_100x75.jpg",
   "thumbnail_medium": "http://i.vimeocdn.com/video/519177743_200x150.jpg",
   "thumbnail_large": "http://i.vimeocdn.com/video/519177743_640.jpg",
   "user_id": 5862464,
   "user_name": "PDNOnline",
   "user_url": "https://vimeo.com/user5862464",
   "user_portrait_small": "http://i.vimeocdn.com/portrait/5664890_30x30",
   "user_portrait_medium": "http://i.vimeocdn.com/portrait/5664890_75x75",
   "user_portrait_large": "http://i.vimeocdn.com/portrait/5664890_100x100",
   "user_portrait_huge": "http://i.vimeocdn.com/portrait/5664890_300x300",
   "stats_number_of_likes": 3,
   "stats_number_of_plays": 843,
   "stats_number_of_comments": 0,
   "duration": 10,
   "width": 1056,
   "height": 720,
   "tags": "Lytro, photography, cameras, technology",
   "embed_privacy": "anywhere"
 }
]

En la respuesta obtenemos los datos del id interno 519177743 y nos ofrece 3 tamaños de miniatura. Es necesario que el video no sea privado

==«==

[![][small]][urlVimeo]
[![][medium]][urlVimeo]
[![][large]][urlVimeo]

[small]: https://i.vimeocdn.com/video/519177743_100x75.jpg "Small 100x75"
[medium]: https://i.vimeocdn.com/video/519177743_200x150.jpg "Medium 200x150"
[large]: https://i.vimeocdn.com/video/519177743_640.jpg "Large 640"
[urlVimeo]: https://vimeo.com/128154222/ "Vimeo"