Tronquer un background de type vidéo

Sujet résolu

Anonyme

27 novembre 2017 à 12:57:00

Bonjour,

après plusieurs essais et recherche je n'arrive toujours pas à obtenir le résultat que je souhaite avoir.

En effet, je souhaite mettre en background une vidéo de fond, ce que j'ai réussi à faire, mais en réduisant la page(aux niveaux des dimensions) la vidéo reste aux mêmes proportions, je voudrai qu'elle soit tronqués, pour qu'elle puisse prendre toute la taille de l'écran, je m'en moque qu'on ne voit plus une partie, c'est justement ce que je recherche, qu'il n'y est pas de bordure blanche.

Je vous fourni donc le code html et css

En vous remerciant d'avance.

body {
	margin: 0;
	padding: 0;
}

#wrapper {
	display: block;
	font-family: "Montserrat-Regular";
	font-size: 32px;
	color: white;
}

video {
	display: block;
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="style.css" rel="stylesheet">
	<link href="ressource/image/TK-1.gif" rel="icon">
	<title>Secret</title>
</head>
<body>
	<div id="wrapper">
				<video autoplay="" muted="" loop="" preload="">
					<source src="ressource/video/video.webm" type="video/webm">
				</video>

si vous voulez plus de spécification, je peux évidemment, encore merci.

Shonen17

27 novembre 2017 à 14:31:55

Salut,

Pour les dimentions de "video", tu n'as qu'à mettre en width sa résolution.

Si ta vidéo fait 1024px par exemple, width=1024px.

Ton wrapper reste à width 100%, et tu lui met un overflow si tu veux pas de scroll. Si l'overflow te dérange sur tout un site, englobe la video dans un conteneur rien que pour elle.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <link href="ressource/image/TK-1.gif" rel="icon">
    <title>Secret</title>
</head>
<body>
    <div id="wrapper">
      <div class="video-container">
                <video autoplay="" muted="" loop="" preload="">
                    <source src="ressource/video/video.webm" type="video/webm">
                </video>
      </div>

.video-container{
 width:100%;
 overflow-x:hidden;
}

video{
 width:1024px;
}

A tester...

Anonyme

7 décembre 2017 à 15:57:28

non non non, a partir du moment ou la page atteind une valeur superieur à 1024 en largeur, la vidéo reste à 1024, cela ne donne pas du tout ce que je voudrais

pour exemple, je voudrais le même comportement que: http://www.celinedion.com/

avec sa vidéo de fond

Merci bien

----------------------------------------------------------------------------------------------------------------------

il me semble avoir trouvé la solution

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	max-width: 100%;
	overflow-x: hidden;
}

si une personne pourrait me dire si cela fonctionnera comme le site que j'ai cité plus haut

----------------------------------------------------------------------------------------------------------------------

Oui, j'édite encore mon message cela fait pas encore exactement ce que je souhaite, c'est perturbant les barres de scrolling son effectivement plus là, mais on peut encore se déplacer sur la page à l'aide du bouton du milieu de la souris(la molette) contrairement au site plus haut :'(

et j'ai l'impression que sur ce site la vidéo d'arrière plan est recadré à chaque fois qu'on modifie la taille de la fenêtre :'( contrairement une nouvelle fois, à ce que j'ai fait

-
Edité par Anonyme 7 décembre 2017 à 17:34:45

Shonen17

8 décembre 2017 à 10:18:09

LeRoiLambda a écrit:

en réduisant la page(aux niveaux des dimensions) la vidéo reste aux mêmes proportions, je voudrai qu'elle soit tronqués, pour qu'elle puisse prendre toute la taille de l'écran

LeRoiLambda a écrit:

pour exemple, je voudrais le même comportement que: http://www.celinedion.com/

Tu aurais pu commencer par là, car tu te contredis vachement. La vidéo de fond du site celinedion ne se redimensionne pas ? Je crois bien que si bien au contraire.

Elle est tronquée en hauteur bien sûr, mais elle se redimensionne en largeur.

Pour ne faire que pomper le site que tu partage :

<section class="content home video-bg">
  <video autoplay="" muted="" loop="" poster="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.jpg" preload=""><source src="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.webm" type="video/webm"> <source src="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.mp4" type="video/mp4"> <source src="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.ogv" type="video/ogg">
  </video>
</section>

@media (min-width: 860px){
  .content.home.video-bg {
    height: 100vh;
  }
}

.content.home.video-bg {
  height: 40rem;
}
.content.video-bg {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.content {
  position: relative;
}

.content.video-bg video {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

Anonyme

15 décembre 2017 à 15:04:21

Shonen17 a écrit:

LeRoiLambda a écrit:

en réduisant la page(aux niveaux des dimensions) la vidéo reste aux mêmes proportions, je voudrai qu'elle soit tronqués, pour qu'elle puisse prendre toute la taille de l'écran

LeRoiLambda a écrit:

pour exemple, je voudrais le même comportement que: http://www.celinedion.com/

Tu aurais pu commencer par là, car tu te contredis vachement. La vidéo de fond du site celinedion ne se redimensionne pas ? Je crois bien que si bien au contraire.

Elle est tronquée en hauteur bien sûr, mais elle se redimensionne en largeur.

Pour ne faire que pomper le site que tu partage :
<section class="content home video-bg">
  <video autoplay="" muted="" loop="" poster="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.jpg" preload=""><source src="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.webm" type="video/webm"> <source src="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.mp4" type="video/mp4"> <source src="https://bubbleup.vo.llnwd.net/o2/celinedion/home-intro-june2017.ogv" type="video/ogg">
  </video>
</section>
@media (min-width: 860px){
  .content.home.video-bg {
    height: 100vh;
  }
}

.content.home.video-bg {
  height: 40rem;
}
.content.video-bg {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.content {
  position: relative;
}

.content.video-bg video {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

Merci, tu es tellement agréable dans ta réponse, c'est affolant.

Shonen17

15 décembre 2017 à 16:33:59

LeRoiLambda a écrit:

Merci, tu es tellement agréable dans ta réponse, c'est affolant.

En me relisant c'est vrai que je peux paraître brut de décoffrage mais ce n'était pas le ton que je voulais utiliser.

Ton problème est-il résolu depuis ? La solution que j'ai apporté t'a t-elle aidé ou mené sur la bonne piste ?

Anonyme

15 décembre 2017 à 17:58:17

Bonjour, je pense que ce lien va t'aider : https://la-cascade.io/video-en-background/