Hallo,
ich möchte gerne ein mp4-Video als Hintergrund haben.
Hatte vorher immer ein normales JPG, aber das ist langweilig.
Habe also ein Bild genommen und Partikel drüber gepackt und als MP4 gerendert. Sieht auch gut aus.
Also habe ich eine Methode gefunden, mit der man ein MP4-Video als Hintergrund benutzen kann.
Code:
Dies klappt auch, allerdings habe ich vorher natürlich auch Inhalt auf meiner Seite gehabt. Der Code vorher mit dem statischen JPG Bild:
Nun habe ich das Problem, dass wenn ich das animierte Hintergrundbild nehme, ich den Rest in der Section nicht mehr sehe, oder weiter unten und deformiert.
Probiert habe ich folgendes:
Hat jemand eine Idee, wie ich das Video komplett in den Hintergrund packe und den Inhalt der Section wie gewohnt sehe?
Danke
ich möchte gerne ein mp4-Video als Hintergrund haben.
Hatte vorher immer ein normales JPG, aber das ist langweilig.
Habe also ein Bild genommen und Partikel drüber gepackt und als MP4 gerendert. Sieht auch gut aus.
Also habe ich eine Methode gefunden, mit der man ein MP4-Video als Hintergrund benutzen kann.
Code:
HTML-Quellcode
- <style>
- video#bgvid{
- min-width:100%;
- min-height:100%;
- width:auto;
- height:auto;
- background: url(assets/images/section-1.jpg) no-repeat top center;
- background-size:cover;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- }
- </style>
- <video id="bgvid" autoplay poster="assets/images/section-1.jpg">
- <source src="media/Animated1.mp4" type="video/mp4" />
- </video>
Dies klappt auch, allerdings habe ich vorher natürlich auch Inhalt auf meiner Seite gehabt. Der Code vorher mit dem statischen JPG Bild:
HTML-Quellcode
- <style>.home-section {
- position: relative;
- background-color: #fff;
- background-repeat: no-repeat;
- background-position: center center;
- width: 100%;
- z-index: 0;
- background-size: cover;
- }</style>
- <section class="home-section home-parallax home-fade home-full-height bg-dark-30" id="home" data-background="assets/images/section-1.jpg">
- <div class="titan-caption">
- <div class="caption-content">
- <div class="font-alt mb-30 titan-title-size-1">Hello & welcome</div>
- </div>
- </div>
- </div>
- </section>
Nun habe ich das Problem, dass wenn ich das animierte Hintergrundbild nehme, ich den Rest in der Section nicht mehr sehe, oder weiter unten und deformiert.
Probiert habe ich folgendes:
HTML-Quellcode
- <style>
- video#bgvid{
- min-width:100%;
- min-height:100%;
- width:auto;
- height:auto;
- background: url(assets/images/section-1.jpg) no-repeat top center;
- background-size:cover;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- }
- </style>
- <video id="bgvid" autoplay poster="assets/images/section-1.jpg">
- <div class="titan-caption">
- <div class="caption-content">
- <div class="font-alt mb-30 titan-title-size-1">Hello & welcome</div>
- </div>
- </div>
- </div>
- <source src="media/Animated1.mp4" type="video/mp4" />
- </video>
Hat jemand eine Idee, wie ich das Video komplett in den Hintergrund packe und den Inhalt der Section wie gewohnt sehe?
Danke