web-dev-qa-db-ja.com

HTML5 CSS3を使用して、iframe YouTube動画を強制的に中央に合わせ、画面全体を背景に覆います。

HTML5 iframe YouTubeビデオを強制的に中央に合わせ、CSS3 HTMLを使用してフルスクリーンのウィンドウの背景をカバーするにはどうすればよいですか？

たとえば、「Paypal.it」ホームページの背景または「nity3d.com/5 "トップ動画、iframeとしてyoutube動画。 iframeは全画面（ズーム）をカバーし、ウィンドウのサイズを変更するときにすべての幅と高さをカバーします。高さをズームする最小幅100％または幅をズームする最小高さ100％を維持しながら、サイズを変更します。

iframe HTML5とCSS3を使用して、この効果をどのように実現しますか？

コード例HTML5

<div class="video" style="opacity: 1;">

    <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" style="height: 720px;">
     </iframe>

</div>

CSS3 HTMLのコーディングは最終的にJavaヘルプをいただければ幸いです。

htmlcssvideobackgroundyoutube-iframe-api
12
Alan Mattano

実際のフルスクリーンソリューションの場合、これは次のように実現できます。

HTML

<div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

CSS

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

完璧ではありません。コンテナの極端なアスペクト比ではうまく機能しませんが、ほとんどの状況で素晴らしい働きをします。これが実際の例です： https://codepen.io/anon/pen/zRVLGJ

8
Hinrich

これはあなたが達成しようとしていることだと思います：

.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */  padding-top: 25px;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

<div class="video-wrapper">
  <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" allowfullscreen></iframe>
</div>

これにより、コンテナーが含まれるビデオが表示され、高さも自動的にスケーリングされます。

私は最初にこの解決策をここで見つけました： https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

3
Sam Willis