web-dev-qa-db-fra.com

Comment rendre Youtube Video responsive?

Je crée un site vidéo et je souhaite que la vidéo soit réactive. J'avais créé un cours

.video {
    float: left;
    width: 90% !important;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-right: 5%;
    margin-left: 5%;
    border: 0px solid #FFF;
    height: 550px !important;
    box-shadow: 1px 1px 3px #555;

et avait donne à youtube code vidéo i.e. code Iframe comme suit

<iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" class="video" allowfullscreen></iframe>

Dites-moi s’il manque quelque chose ou d’autres astuces pour rendre cette vidéo plus réactive.

youtuberesponsive-webdesignvideo-sitemap
4
Master Prons

Je joins la vidéo iframe dans un div.

<div class=youtube-container>
     <iframe src="https://www.youtube.com/embed/MRk5HynHe44" frameborder="0" allowfullscreen></iframe>
</div>

J'utilise des CSS pour rendre cette div réactive telle qu'elle soit large et qu'elle conserve toujours le format d'image 16: 9. Ensuite, j'utilise CSS pour que YouTube iFrame occupe tout le conteneur:

.youtube-container {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.youtube-container iframe,.youtube-container object,.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
3
Stephen Ostermiller