Como incorporar vídeo vimeo com design responsivo

Question

Como incorporar vídeo vimeo com design responsivo

Fiz muita pesquisa na internet, mas esta questão não é exactamente a mesma coisa. Quero incorporar um vídeo do vimeo usando a etiqueta <iframe>. Também tentei este código.

.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>

Mas se você tem um ecrã grande, ele também está ficando maior, e isso não parece ótimo. Só quero que encolha não mais do que o previsto.

7

responsive-design video vimeo

Author: Jonjie, 2018-04-11

Source

8 answers

score 4 · Answer 1

Isto funciona comigo. Eu usei '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>

score 3 · Answer 2

@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;
   }
}

Remover Este CSS Adicionar depois tentar

score 2 · Answer 3

Adicionar css na pesquisa multimédia para um ecrã grande como

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

score 1 · Answer 4

Tente isso, ele vai trabalhar com qualquer tipo de dispositivos de mí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>

score 1 · Answer 5

Este é um truque do Bootstrap para criar elementos sensíveis que mantenham as suas proporções. Neste exemplo eu vou usar 16: 9 Como é um objeto de vídeo, mas eu usei isso para fazer círculos, quadrados, e todos os tipos de formas.

Esta técnica usa um recipiente e o elemento ::before.

HTML

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

O Elemento ::before merece alguma atenção porque é realmente o que faz isto funcionar. Mudar o estofamento-top irá alterar as suas proporções, ou seja 16:9 = 9 / 16 = 56.25%

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

Se você quisesse controlar o height, então você poderia apenas mudar o width do seu recipiente .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;
}

score 0 · Answer 6

.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>

score 0 · Answer 7

O que está a fazer é correcto se quiser ter um vídeo sensível que mantenha sempre as proporções do leitor de vídeo.

Ao ponto de crescer em grandes resoluções, podes resolver isto com:

Pesquisa multimédia Adicione uma pesquisa multimédia para ecrãs grandes para que possa reduzir as proporções do vídeo, como sugerido numa das respostas anteriores https://stackoverflow.com/a/49767577/1993956

Largura Máxima O outro é adicionar uma largura máxima para o seu container de vídeo se você se importar com a proporção de aspecto do jogador.

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

Aqui está um exemplo: https://codepen.io/jaireina/pen/YLWKvp Espero que isso ajude.

score 0 · Answer 8

Você tem que dar a pesquisa de mídia para ele, qualquer que seja o tamanho máximo que você decidiu apenas escrever mídia w.r.t decidiu tamanho máximo. como se eu tivesse escrito a pesquisa de mídia css para o tamanho do ecrã que tem a largura mínima de 1200px

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

Espero que isto resolva o teu problema