Comment Devenir Développeur

HTML – video et intégration avec YouTube

Voici comment insérer une video en HTML
Avec la balise <video> vous pouvez ajouter également de nombreuses options comme la lecture en boucle, le démarrage automatique etc…

<video width="320" height="240" controls> <source src="mavideo.mp4" type="video/mp4"> <source src="mavideo.ogg" type="video/ogg"> Votre navigateur est incompatible </video>

BONUS : comment intégrer une video sur YouTube

En fait une vidéo depuis YouTube c’est légèrement différent car ils utilisent le concept de l’iframe, une iframe c’est d’intégrer sur son site un autre site. YouTube à optimiser un maximum pour que leurs iframe deviennent parfaitement fluide pour tous les sites.

En allant sur une vidéo de YouTube je clique sur le bouton « Share » puis « Embeded« . J’obtiens un code comme celui-ci. Je peux directement faire un copier coller dans mon editeur de code pour l’afficher. Je peux aussi changer les valeurs, la largeur, la hauteur, activer ou supprimer la lecture automatique.

<iframe width="560" height="315" src="https://www.youtube.com/embed/zJTfXSuWsw8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Résultat :