🇪🇸 ✍️📺 Videos de Youtube y Vimeo con estilo en Markdown 👨‍🎨👩‍🎨

Anterior: ⏪ Listas y Tablas en Markdown ☑️

==«==

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

==»==

📺 Incrustar videos de 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:

==«==

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

@youtube

---

Incrustar videos de Vimeo en Platzi

==«==

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

@vimeo

Enlazar video en Markdown (funciona en 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.

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á:==

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"

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

==«==

Continúa tu aprendizaje con:

• ⏩ ASCII Art en Markdown 🔣

==»==

📖 📷 🎬 🍕 🆎 🔲 🌈 ☑️ 📺 🔣 ➗

Hecho con el 💚 en el 2K20.

⚫