Ich bin gerade unterwegs. Ich melde mich später dazu. Kann mir aber vorstellen das Andreas S. oder einer der anderen Experten sich hier meldet. 

Bis später

Bestens & danke

Wie heisst deine Videodatei?  Hast du mehrere Arten der Datei?  (.mp4, .ogg, .webm)  Wenn ja, musst du diese extra beim Reiter "Erweitert" hochladen z.B. in das Verzeichnis "video".

Dann kommt der HTML Code unter HTML rein.  Den CSS code dann in "Erweitert" !

Danke dir vielmals, Andreas. Jetzt ist mir schon vieles klarer, aber es funktioniert noch nicht.

Ich habe ein Testvideo auf den Server /html/Video hochgeladen, Code wie beschrieben eingefügt. (siehe Bild)

Was muss ich noch anpassen?

Noch eine Frage. Im Beispiel hat das Video eine "Pause" Funktion und einen Text. Beides benötige ich nicht, es soll einfach das Video als endlos abspielen. Könntest du mir bitte den Code anpassen, Pause/Text rausnehmen?

Super nett, wenn du mir helfen könntest.

Danke

Claudio

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- Use a button to pause/play the video with JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
    position: fixed;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}

#myBtn:hover {
    background: #ddd;
    color: black;
}

<videocontrols="false" loop id="myVideo">

  <source src="html/video/A.MP4" type="video/mp4">

Claudio,

hat es funktioniert ?

Vielen Dank, an beide Andreas!

Nein, ich bastle noch daran herum, habe einiges ausprobiert.

Ich habe das Video auf den Serververzeichnis /Video hochgeladen, bei 'Erweitert' Verlinkte Datei hinzugefügt mit dem Serverpfad /html/video oder /video und folgende Varianten getestet:

• <videocontrols="false" loop id="myVideo">

    <source src="html/video/A.MP4" type="video/mp4">

• <videocontrols="false" loop id="myVideo">

    <source src="video/A.MP4" type="video/mp4">

• CSS code unverändert gelassen

Funktioniert nicht. 

Das Verzeichnis auf dem Server lautet /html, d.h. wenn ich meine Webseite hochlade geht die in das Verzeichnis /html.

Hast du eine Idee, wo der Fehler liegen könnte? Was ich noch testen muss, alle Dateien hochzuladen und nicht nur die geänderten.

Frage betr. Verzeichnis: muss ich /html/Video nutzen oder nur /Video

Vielen Dank!

Das ist schon richtig, dass du deine Seiten in das Verzeichnis "html" raufladen musst, weil dort dein Rootverzeichnis ist.

Aber im Screenshot was du angehängt hast, hast du die A.MP4 Datei noch zusätzlich in html/Video geladen.

Gibt mal im Browser die URL ein ob du die Video Datei starten kannst und dann siehst du welchen Pfad du nehmen musst.  Es kann auch sein, dass die Großbuchstaben der Grund ist wieso es nicht funktioniert.

<source src="html/Video/A.MP4" type="video/mp4">

Vielen Dank, Andreas, dein Tipp mit der URL war mal schon sehr hilfreich! Ich kann das Video über die URL ansteuern, funktioniert auch.

Mit der Webseite noch nicht. Ich habe das Video (Test) in verschiedene Verzeichnisse gestellt und kann alle Verzeichnisse direkt über die URL aufrufen.

Ich habe auch verschiedene Varianten mit dem Pfad ausprobiert, bis jetzt noch ohne Erfolg....aber ich 'bastle' weiter...

Das Video funktioniert jetzt. Ich habe folgenden Code genommen:

<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="/Video/A.MP4" type="video/mp4">
</video>

Jetzt habe nur noch folgendes Problem:

- das Video ist nicht nur im Headerbereich, sondern füllt den gesamten Bildschirm und die Seite ist nicht mehr sichtbar. Wenn ich scrolle ist dann die Fusszeile über den Video sichtbar, aber alle Elemente unter dem HTML Objekt (mit dem Video) nicht mehr.

Kannst du mir da auch noch weiterhelfen?

Vielen Dank!

Der Code, welchen ich bei 'Erweitert' CSS reinkopiert habe. Was ich nicht brauche ist die 'Pausen' Funktion oder einen Text über das Video zu schreiben.

CSS

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}

#myBtn:hover {
background: #ddd;
color: black;
}

Ich habe eine mögliche Ursache gefunden: Parallax

Ich konnte das Problem teilweise lösen. Habe fixed mit relative geändert, funktioniert.

Jetzt habe nur noch das Problem, dass Video nicht auf der ganzen Bildschirmbreite angezeigt wird (siehe Bild)

Danke für Tipp

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height:100%;
}

#myBtn:hover {
background: #ddd;
color: black;
}

Danke, nein, ich habe es nicht im Header eingepackt, sondern über das HTML Objekt. Als im CSS position: fixed hatte, war das Video über die ganze breite, aber ich konnte nicht mehr scrollen.

Dann habe ich auf position: relative geändert und alles funktioniert, ausser, dass das Video nicht mehr über die ganze Seite geht.