A l'hora d'inserir-hi vídeos, per exemple des de YouTube, una vegada obtingut i copiat el codi HTML que ens proporciona l'aplicatiu, només l'hem d'aferrar al lloc dins el codi HTML de la nostra pàgina on vulguem que es mostri, dins un marc. Veurem que es fa servir l'etiqueta <iframe></iframe>.
Els paràmetres que ens proporciona YouTube per defecte són:
- width="560" (amplada del vídeo, en píxels)
- height="315" (alçària del vídeo, en píxels)
- src="https://www.youtube.com/embed/YKUWBB_fDjA?si=zgRVQ6nlXMKftaWK" (URL del vídeo)
- title="YouTube video player" (títol)
- frameborder="0" (sense vorera)
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" (aquests paràmetres s'han de deixar com estan, no els modificarem)
- referrerpolicy="strict-origin-when-cross-origin" (aquests paràmetres s'han de deixar com estan, no els modificarem)
- allowfullscreen (permet posar el vídeo a pantalla completa)
Podem afegir un paràmetre extra, si escau, al codi que ens proporciona YouTube:
- start="100" (en quin segon de la durada total del vídeo volem que comenci)
Per raons d'accessibilitat, convé afegir un petit títol, del nivell adient i just abans del vídeo, que descrigui el que es visualitza.
| Codi HTML |
<h3>Video Webinar EBAP: El teletreball saludable</h3>
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/YKUWBB_fDjA?si=zgRVQ6nlXMKftaWK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>| Visualitzat en el navegador |