5

✍️📺 Incrusta videos en tus aportes para Platzi y un tip para incluirlos en GitHub con Markdown 👨‍🎨👩‍🎨

Luis
luisca
35157

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](ZYmIUiK8ZQI|https://www.youtube.com/watch?v=ZYmIUiK8ZQI)

» El código anterior producirá:»


Vimeo en Platzi

«

@[vimeo](427943407|https://vimeo.com/427943407/)

» El código anterior producirá: »

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 miniaturaTamaño (px)URL
Player Background480x360https://i1.ytimg.com/vi/«ID»/0.jpg
Start120x90https://i1.ytimg.com/vi/«ID»/1.jpg
Middle120x90https://i1.ytimg.com/vi/«ID»/2.jpg
End120x90https://i1.ytimg.com/vi/«ID»/3.jpg
High Quality480x360https://i1.ytimg.com/vi/«ID»/hqdefault.jpg
Medium Quality320x180https://i1.ytimg.com/vi/«ID»/mqdefault.jpg
Normal Quality120x90https://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á:

xxxxxxx

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"

» El Código anterior producirá:



«

Continúa tu aprendizaje con:

»

📖📷🎬🍕🆎🔲🌈☑️📺🔣

Hecho con el 💚 en el 2K20.

Escribe tu comentario
+ 2
Ordenar por:
1
17171Puntos

Proscontras
Esta 👌 superDepende del uso que le des xd 👎

Bien me gusta estoo!!!

1
10286Puntos

Como sería para hacerlo desde google drive?

0
35157Puntos
un año

creo que para esa plataforma no se encuentra disponible.