web-dev-qa-db-fra.com

La vidéo s'étend sur toute la page d'accueil

Où pourrais-je trouver un cadre pour une page d'accueil dans laquelle je pourrais avoir une vidéo HTML étendue (une résolution maximale serait très bien, comme max-width: 2500px ou quelque chose)?

J'utilise un thème TwentyTwelve que j'ai personnalisé. Tout ce dont j'ai besoin, c'est une barre d'en-tête supérieure pour le logo et la navigation (100 pixels de haut) et un pied de page de la même taille. Le reste de l'écran peut être la vidéo.

C'est un peu ce que j'ai comme base simple pour commencer. Définir la largeur de la #page comme quelque chose de grand semble remplir l’écran. Le reste des éléments à l'intérieur est réglé sur width: 100% par défaut, donc cela semble bien aussi. Je n'arrive tout simplement pas à étirer la vidéo et à combler le parent.

Merci!

<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

Vous pouvez ajouter des marges négatives à l'élément vidéo.

Si en ligne (ajuster au besoin):

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

Si dans la feuille de style (encore ... ajustez au besoin):

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

Une autre option consiste à définir la largeur sur quelque chose de supérieur à la largeur de la div parente. Vous devrez également ajuster la marge gauche de l'élément.

En ligne (ajuster au besoin):

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

Si dans la feuille de style (encore ... ajustez au besoin):

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

Si vous avez votre élément à étirer dans un wrapper de largeur fixe, comme

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

ou quelque chose comme ça, vous pouvez utiliser l'unité viewport-width pour css. Essayez comme ça:

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

Bon codage!

2
kuchenundkakao