<section id="section-video">
<div class="container">
<h2>Integrer une video locale :</h2>
<video controls poster="../integration video/Images/Capture.png">
<source
src="../integration video/Videos/abstract-virtual.mp4"
type="video/mp4"
/>
</video>
</div>
</section>
width et heights: largeur et hauteur
(privilégier de le faire sur CSS, plutôt…) :
.container {
max-width: 1200px;
margin: 0 auto;
}
video {
width: 100%;
}
controls: laisse ou non apparaitre les contrôles de lecture de la vidéo… A METTRE ABSOLUMENT
poster : vignette de présentation de la vidéo (même résolution que la vidéo de pref…)
source: les liens vers les différentes vidéos. Permet de proposer différentes versions de la même vidéo (au cas où les navigateurs n’intègrent pas tous les formats)
- Autres attributs:
INTEGRER VIDEO YOUTUBE:
copier code d’intégration
Le coller dans le html:
<h2>Integration d'une vidéo youtube :</h2>
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/JDrsE9wZRlY"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
POUR RENDRE RESPONSIVE LA VIDEO YOUTUBE:
dans le HTML, ajouter une DIV autour de la vidéo:
<section id="section-youtube">
<div class="container">
<h2>Integration d'une vidéo youtube :</h2>
<div class="video-responsive">
<iframe
width="1280"
height="720"
src="https://www.youtube.com/embed/JDrsE9wZRlY"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</div>
</section>
dans le CSS ajouter ce bout de code (mystérieux):
/* ----------------------- SECTION VIDEO YOUTUBE --------------------- */
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}