web-dev-qa-db-ja.com

ホームページ全体に広がるビデオ

HTMLビデオを広げることができるホームページのためのフレームワークはどこにありますか（max-width：2500pxなどのように、特定の最大解像度まで結構です）。

カスタマイズしたTwentyTwelveテーマを使用しています。必要なのは、ロゴとナビゲーション用の上部ヘッダーバー（高さ100ピクセル）と同じサイズのフッターだけです。画面の残りの部分はビデオです。

これは私が始めるための単純な基盤として持っているものの一種です。 #pageの幅を大きなものとして定義すると、画面いっぱいに表示されます。内部の他の要素はwidth：デフォルトで100％に設定されているので、これも問題ないようです。ビデオを伸ばして親divを埋めることはできないようです。

ありがとうございます。

<div id="page" style="width: 2400px; max-width: 2500px;">
    <header>
         <!-- Logo and nav here -->
    </header>

    <div id="main" class="wrapper">
      <video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null">
         <source src="/wp-content/uploads/2018/04/video.webm" type="video/webm">
      </video>
    </div>
</div>
customizationhomepageresponsivevideo-header
1
916 Networks

Video要素にマイナスの余白を追加することができます。

インラインの場合（必要に応じて調整）：

<video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null" style="margin-left: -50px; margin-right: -50px;">

スタイルシートの場合（やはり...必要に応じて調整してください）：

.vjs-tech {
  margin-left: -50px;
  margin-right: -50px;
}

もう1つの選択肢は、幅を親divの幅よりも大きい値に設定することです。要素の左マージンも調整する必要があります。

インライン（必要に応じて調整）：

<video id="video_688987199_html5_api" class="vjs-tech" preload="auto" autoplay="" data-setup="{}" src="/wp-content/uploads/2018/04/video.mp4" poster="null" style="margin-left: -50px; width: 120%;">

スタイルシートの場合（やはり...必要に応じて調整してください）：

.vjs-tech {
  margin-left: -50px;
  width: 120%;
}
2
lavekyl

次のような固定幅を持つラッパーに、引き伸ばされる要素がある場合

.wrapper {
     width:1200px;
     margin:0 auto;
}

または、そのようなものであれば、cssにviewport-widthの単位を使用できます。これを試してみてください。

#main .vjs-tech {
     width:100vw; //Make as wide as the screen viewport
     height:auto; //Keep Aspect Ratio
     display:block;
     left:50%; //the left Edge of the video is now in the center
     margin-left:-50vw; //move the video 50% of the viewport width to the left
}
#page {
     overflow-x:hidden; //if there is a vertical scroll bar, don't show the horizontal one
}

ハッピーコーディング！

2
kuchenundkakao