Video als Loop

[Onlineshopper]

Ich möchte gern auf der Startseite im Hintergrund ein Video laufen lassen, welches mit After Effects erstellt worden ist.

Bei uns gibt es jetzt einen neuen Artikel, der sich Firestorm nennt.
Da würde ich jetzt gerne zu dem Artikel ein Video abspielen, welches aber nur auf der Startseite im Hintergrund abgespielt wird.

Ist sowas möglich?

LG
Nils

Linkback: https://www.modified-shop.org/forum/index.php?topic=38664.0

[hpzeller]

So etwas -> https://www.w3schools.com/howto/howto_css_fullscreen_video.asp?

Oder hier -> http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
mit Demo hier -> https://codepen.io/dudleystorey/pen/knqyK?

Gruss
Hanspeter

[longchuan]

@hpzeller
Das wäre etwas tolles. Ist das auch responsiv?

[hpzeller]

Das zweite Beispiel ist responsive.

Gruss
Hanspeter

[Onlineshopper]

Genau so etwas meinte ich. Ich hatte das mal als Hintergrundbild gemacht aber als Video bisher nicht.
Wie baut man das denn "nur" auf der Startseite ein?

LG
Nils

[hpzeller]

Also in meinen Testshop mit Template Bootstrap3 von Karl habe ich mal folgenden Code in die index.html ganz am Anfang eingebaut.

Code: PHP  [Auswählen]

{if isset($home) && $home == true}
<style>
#myVideo {
   position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}
#container {
 opacity: 0.8;
}
</style>
<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
{/if}
 

Demo -> https://hpzeller.com/modified2022/

Gruss
Hanspeter

[Onlineshopper]

Hmmm also im sichtbaren Bereich des Shops darf es natürlich nicht zu sehen sein.
Also nur da, wo sich nichts wichtiges befindet darf das Video zu sehen sein.

Wie auf dem Bild im Anhang, nur eben nicht als Bild sonder als Video.

LG
Nils

[hpzeller]

So -> https://hpzeller.com/modified2022/?
Aber dann kann man ja kaum noch was vom Video sehen.

Gruss
Hanspeter

[Onlineshopper]

Ja genau so . Sehr gut 
Naja bei mir muss dann nur ein "Feuersturm" im Hintergrund laufen.

Wie hast Du das jetzt eingebaut?

LG
Nils

[longchuan]

@hpzeller
und wie baut man es im orginalen Responsiven Template ein?
Danke

[hpzeller]

Beim Standardtemplate tpl_modified habe ich mal folgenden Code in die 'templates/tpl_modified/index.html' ganz am Anfang eingebaut.

Code: PHP  [Auswählen]

{if isset($home) && $home == true}
<style>
#myVideo {
 position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
#layout_navbar {
 opacity: 0.8;
}
#layout_logo {
 background-color: #fff;
 opacity: 0.8;
  padding-left: 5px;
  padding-right: 5px;
}
#layout_content {
 background-color: #fff;
 opacity: 0.8;
  padding-left: 5px;
  padding-right: 5px;
}
#layout_footer {
 opacity: 0.6;
}
</style>
<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
{/if}
 

https://hpzeller.com/modified2022/

Das responsive Template "tpl_modified_responsive" habe ich nicht, deshalb kann ich auch nicht sagen wie man es in dieses Template einbaut.

Gruss
Hanspeter

[Onlineshopper]

Hm und genau das Template habe ich 

[hpzeller]

Vorschlag: Bau den Code mal testweise in dein responsives Template ein.

Gruss
Hanspeter

[Onlineshopper]

Das funktioniert sogar 
Allerdings schimmert es in der Mitte immer noch durch.
Der Shop darf dadurch nicht beeinträchtigt werden. Geht das auch?

LG
Nils

[hpzeller]

[...]
Allerdings schimmert es in der Mitte immer noch durch.
Der Shop darf dadurch nicht beeinträchtigt werden. Geht das auch?
[...]

opacity: 0.8; bzw. opacity: 0.6; ersetzen mit opacity: 0.99;

Gruss
Hanspeter