Vimeo full width

Question

Vimeo full width

Staram się, aby film vimeo był wyświetlany na całej szerokości strony internetowej.

Tak to teraz wygląda:

Jak widać czarny jest na pełnej szerokości, ale nie Wideo. Powinien być na pełnej szerokości, nie pokazano żadnych elementów sterujących, grać automatycznie i grać w pętli.

Mój kod wygląda teraz tak:

<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Klient ma vimeo plus, ale nie vimeo pro. Czy ktoś może mi z tym pomóc?

UPDATE:

Zmieniłem kod do tego:

<style>
    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0; overflow: hidden;
        max-width: 100%; height: auto;
    }
    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Ale nadal mam czarną obwódkę na dole i na górze.

Stworzyłem jsfiddle, gdzie możesz również zobaczyć to: https://jsfiddle.net/07fkfwz3 / . A film, który można zobaczyć tutaj nie ma żadnych granic.

26

html css vimeo video width

Author: nielsv, 2017-03-17

Source

6 answers

Spróbuj tego

<style>
.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: hidden; 
    max-width: 100%; height: auto; 
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}
</style>

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Edytuj

Więc po zobaczeniu skrzypiec udało mi się rozwiązać twój problem w ten sposób:

CSS

        .embed-container {
      position: relative;
      padding-bottom: 56.25%;

      height: 0;
      overflow: hidden;
      max-width: 100%;
      height: auto;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
      position: absolute;
      top: 13%;
      width: 100%;
      height: 75%;
    }

HTML

<div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

7

Author: Jesse de gans,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-20 13:06:26

Zastąp numer ID filmu (w tym przypadku 19022044)

HTML:

<div class="vimeo-full-width">
   <iframe src="https://player.vimeo.com/video/19022044?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

CSS:

.vimeo-full-width {
    padding: 56.25% 0 0 0;
    position: relative;
}

.vimeo-full-width iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Górna wyściółka jest 56.25% ze względu na Współczynnik Proporcji 16: 9

2

Author: Ivan Belchev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-06 11:01:57

Możesz spróbować tego: https://jsfiddle.net/c4j73z16/4/

Html

<div class='embed-container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&title=0&byline=1&portrait=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

Css

<style>
  .embed-container {
    position: relative;
    padding-bottom: calc(70vh - 6.7em);
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container .vcontent {
    position: absolute;
    overflow: hidden;
    height: calc(70vh - 6.2em);
    width: 100%;
    margin-top: -0.5em;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    padding: 0;
    margin: -3em 0;
  }
</style>

Używam vh wysokości i dalej div.vcontent, aby prawidłowo poruszać się, aby lepiej dopasować to, czego potrzebujesz.

1

Author: g.annunziata,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-21 10:41:18

HTML to

<div class='container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

I w stylizacji

.container {
      position: relative;
      padding-bottom: calc(70vh - 6.7em);
      height: 0;
      overflow: hidden;
      max-width: 100%;

    }
    .container .vcontent {
       position: absolute;
   overflow: hidden;
   height: calc(70vh - 6.2em);
   width: 100%;
   margin-top: -0.5em;
    }
    .container iframe,
    .container object,
    .container embed {
      position: absolute;
  overflow: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 70vh;
  padding: 0;
  margin: -3em 0;
    }

0

Author: Ankush Verma,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-20 13:29:34

To mi pomogło:

<style>
  .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%;
  }
</style>
<div class='embed-container'><iframe src='https://player.vimeo.com/video/157467640?background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Źródło: https://forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2

0

Author: Lucas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-28 01:37:58

score 63 · Accepted Answer

Magiczny numer wypełnienia, który tworzysz dla kontenera, musi odpowiadać proporcjom wideo. Jeśli obejrzysz wideo na vimeo, res wynosi 1296x540. Aby uzyskać procent proporcji, podziel 540 / 1296 * 100% = 41.66666667% padding.

[[2]}Oto skrzypce, ponieważ filmik nie wydaje się dobrze grać w SO sandbox. https://jsfiddle.net/mcoker/p7q6x4d5/1/

.embed-container {
  --video--width: 1296;
  --video--height: 540;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

.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/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>