it-swarm.com.de

Video, das sich über die gesamte Homepage erstreckt

Wo finde ich ein Framework für eine Homepage, auf der sich ein HTML-Video über die gesamte Länge erstrecken kann (bis zu einer bestimmten maximalen Auflösung, wie z. B. max-width: 2500px oder so)?

Ich verwende ein TwentyTwelve-Thema, das ich angepasst habe. Alles was ich brauche ist eine obere Kopfzeile für Logo und Navigation (100px groß) und eine Fußzeile der gleichen Größe. Der Rest des Bildschirms kann das Video sein.

Dies ist eine Art, was ich als einfache Basis habe, um zu beginnen. Das Definieren der Seitenbreite als etwas Großes scheint den Bildschirm auszufüllen. Die restlichen Elemente sind standardmäßig auf Breite eingestellt: 100%, sodass dies auch in Ordnung zu sein scheint. Kann einfach nicht scheinen, das Video zu dehnen und das übergeordnete div zu füllen.

Vielen Dank!

<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>
1
916 Networks

Sie können dem Videoelement negative Ränder hinzufügen.

Wenn inline (nach Bedarf anpassen):

<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;">

Wenn im Stylesheet (erneut ... nach Bedarf anpassen):

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

Eine andere Möglichkeit besteht darin, die Breite so einzustellen, dass sie größer als die Breite des übergeordneten Div ist. Sie müssten auch den linken Rand des Elements anpassen.

Inline (nach Bedarf anpassen):

<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%;">

Wenn im Stylesheet (erneut ... nach Bedarf anpassen):

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

Wenn Sie Ihr zu streckendes Element in einem Wrapper haben, der eine feste Breite wie hat

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

oder so ähnlich, können Sie die Ansichtsfenster-Breite für CSS verwenden. Versuchen Sie es wie folgt:

#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
}

Viel Spaß beim Codieren!

2
kuchenundkakao