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'inserir al punt del codi HTML on vulguem que aparegui, 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, perquè són generats automàticament per YouTube i poden variar amb el temps)
- referrerpolicy="strict-origin-when-cross-origin" (aquests paràmetres s'han de deixar com estan, no els modificarem, perquè són generats automàticament per YouTube i poden variar amb el temps)
- 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>Vídeo 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 |