web-dev-qa-db-fra.com

Comment intégrer la vidéo vimeo avec un design réactif

J'ai fait beaucoup de recherches sur Internet, mais ce problème n'est pas exactement la même chose. Je souhaite intégrer une vidéo de vimeo à l’aide de la balise <iframe>. J'ai aussi essayé ce code:

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}



<div class="video-responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>

Mais si vous avez un grand écran, il devient également plus grand et ce n’est pas très beau. Je veux juste que la taille soit réduite au maximum width et height fournis.

videoresponsive-designvimeo
7
Jonjie

Cela fonctionne pour moi. J'ai utilisé bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
      </div>
    </div>

  </body>
</html>

4
Ricardo
@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}

supprimer ce css ajouter puis essayez

3
p_ketan

ajouter css dans la requête multimédia pour un écran de grande taille comme

@media only screen and (min-width: 1600px) {
  .video-responsive {
    padding-bottom: 40%;// whatever you want
    - or -
    give height to this div
  }
}
2
p_ketan

Essayez ceci, cela fonctionnera avec tout type de périphérique multimédia. 

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

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}
<div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

1
Delowar Hosain

C'est une astuce de Bootstrap pour créer des éléments réactifs qui conservent leurs proportions. Dans cet exemple, je vais utiliser 16: 9 comme objet vidéo, mais je l'ai utilisé pour créer des cercles, des carrés et toutes sortes de formes.

Cette technique utilise un conteneur et l'élément ::before.

HTML

<div class="video-responsive">
  <iframe class="video-responsive-item" src="..."></iframe>
</div>

L’élément ::before mérite une attention particulière car c’est vraiment ce qui fait que cela fonctionne. Changer le padding-top changera votre format d'image, c'est-à-dire 16:9 = 9 / 16 = 56.25% 

.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

Si vous voulez contrôler la height, vous pouvez simplement changer la width de votre conteneur .video-responsive.

CSS

.video-responsive {
  position: relative;
  display: block;
  width: 300px;
  overflow: hidden;
}


.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
1
Josh Bradley

Ce que vous faites est correct si vous souhaitez avoir une vidéo réactive qui conserve toujours le rapport hauteur/largeur du lecteur vidéo.

Pour vous faire comprendre qu'il continue de grandir dans les grandes résolutions, vous pouvez résoudre ce problème avec:

Requête de média Ajoutez une requête de média pour les grands écrans afin de pouvoir réduire le format d'image de la vidéo comme suggéré dans l'une des réponses précédentes https://stackoverflow.com/a/49767577/1993956

max-width L’autre consiste à ajouter une largeur maximale à votre conteneur vidéo si vous vous souciez du rapport de format du lecteur. 

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    max-width: 800px;
    margin: 0 auto; 
}

Voici un exemple: https://codepen.io/jaireina/pen/YLWKvp

J'espère que cela pourra aider.

0
Jair Reina

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media screen and (min-width: 1600px) {
  .video-responsive{
     height: 480px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}
<div class="video-responsive">
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>
</div>

0
p_ketan

Vous devez donner une requête aux médias, quelle que soit la taille maximale que vous avez décidé d'écrire, il vous suffit d'écrire le support au maximum. comme j'ai écrit css media query pour la taille d'écran qui a une largeur minimale de 1200px

@media screen and (min-width: 1200px) {
  .video-responsive{
    width: 1170px;
  }
}

J'espère que cela résoudra votre problème

0
Neeraj Rathod