//Über Abschnittsinhalt hier //Kleiner Hintergrundabschnittsinhalt hier

Ich habe Font Awesome für die sozialen Symbole in diesem Abschnitt verwendet Kleiner-Hintergrund-Abschnitt. Wir werden dann mithilfe des Plugins eine Vorlage für unser Video hinzufügen jQuery.mb.YTPlayer. Fügen Sie unmittelbar danach den folgenden Code ein .

Hier ist, was wir verwendet haben, um das Video einzurichten:

• Klasse Spieler- diese Klasse wird vom Plugin verwendet mb.YTPlayer
• Video-URL- Link zum Video
• Eindämmung- CSS-Selektor, in dem das Video abgespielt werden soll
• automatisches Abspielen- Video automatisch abspielen
• stumm- Anwesenheit von Ton
• fange an bei- die Uhrzeit, ab der Sie das Video abspielen möchten
• Opazität- Videotransparenz

css

Lassen Sie uns Stile zu unserer Website hinzufügen. Lassen Sie uns zunächst das Erscheinungsbild von HTML, Text, Absatz-Tags und Aufzählungszeichen definieren.

Html (Höhe: 100 %) Text (Schriftart: 15 Pixel/23 Pixel "Raleway", serifenlos; Rand: 0; Polsterung: 0; Höhe: 100 %; Breite: 100 %; -webkit-font-smoothing: Antialiased; - webkit-text-size-adjust:100% ) p ( font-size:20px; line-height:140%; text-align:center ) ul li ( display:inline-block; list-style:none; padding-right : 10px; )

Wrapper ( z-index:600; position:relative ) .pattern ( background-image:url(../images/pattern.png); background-repeat: repeat; background-attachment:scroll; width:100%; height: 100%; position:absolute; top:0; left:0 ) .divider ( background-image:url(../images/divider.png); display:block; width:300px; height:35px; margin:10px auto ) #colorize ( color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )

Es ist Zeit, den Abschnitt mit dem großen Hintergrund zu stylen. Lassen Sie uns installieren z-index auf der 550 und Parameter Überlauf auf versteckt. Dies ist notwendig, um zu verhindern, dass YouTube-Inhalte (Untertitel, Anmerkungen) auf unserer Website angezeigt werden. Die restlichen Stile sind für die Kopfzeilen, Schaltflächen und das Standardbild (dazu später mehr).

Big-background (z-index:550; text-align:center; height:100%; min-height:100%; position:relative; overflow:hidden ) .big-background .big-background-container ( width:830px ; max-width:100%; display:inline-block; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate (-50 %,-50 %); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%, -50%) ) .big-background-title (Schriftfamilie:"Raleway",serifenlos; Schriftgröße:78px; Farbe:#fff; Schriftstärke:300; Textumwandlung:Großbuchstaben; Textausrichtung :center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center ) font-family:"Lato", serifenlos; Schriftgröße: 13 Pixel; Textumwandlung: Großbuchstaben; Textdekoration: keine; Farbe: #fff; Hintergrund: transparent; Rahmen: 2 Pixel solide #fff; Polsterung: 10 Pixel 14 Pixel; Cursor: Zeiger; Buchstabenabstand :2px; Textausrichtung: Mitte; display:inline-block; -webkit-transition:.4s-Hintergrundeinfachheit; -moz-transition: .4s Hintergrund-Ease; -o-Übergang: .4s Hintergrund-Ease; Übergang: .4s Hintergrundbeschleunigung; ) .big-background-btn:hover ( color:#fff; background:rgba(255,255,255,0.20) ) .big-background-default-image ( background:url(../images/sunset.jpg); background-repeat :no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden )

Kommen wir nun zum Abschnitt über Abschnitt. Stellen wir den Parameter ein Hintergrundfarbe auf weiß u Polsterung 60px oben und unten und 20px links und rechts.

About-Abschnitt ( Schriftfamilie: "Lato", Sans-Serif; Farbe: #7f8c8d; Hintergrund: #fff; Polsterung: 60px 20px ) .about-section-container ( Textausrichtung: Mitte; Polsterung unten: 50 Pixel ) .about-section-title (font-family:"Raleway",serifenlos; font-size:40px; background:#fff; color:#3d566e; padding:0 35px; margin-bottom:22px; background-attachment: Bildlauf; Hintergrundwiederholung:Wiederholung-x; Hintergrundposition:Mitte Mitte; Textumwandlung:Großbuchstaben ) a.about-section-btn ( Schriftfamilie:"Lato", serifenlos; Schriftgröße:13px; Text -transform:Großbuchstaben; Textdekoration:keine; Farbe:#34495e; Hintergrund:transparent; Rand:2px fest #34495e; Polsterung:10px 14px; Cursor:Zeiger; Buchstabenabstand:2px; Textausrichtung:Mitte; Anzeige: Inline-Block; -webkit-transition: .4s-Hintergrundbeschleunigung; -moz-transition:.4s-Hintergrundbeschleunigung; -o-transition:.4s-Hintergrundbeschleunigung; Übergang:.4s-Hintergrundbeschleunigung; ) .about-section-btn:hover ( Farbe:#ffff; Hintergrund: #34495e; )

Für den Small-Background-Abschnitt, der auch als Fußzeile dient, weisen wir eine Breite von 100 % und einen Parameter zu Überlauf auf versteckt. Wir werden auch einige hinzufügen Polsterung oben und unten, damit unser Video zu sehen ist. Lassen Sie uns abschließend Stile für die Schaltflächen für soziale Medien hinzufügen.

Small-background-section ( font-family:"Raleway", serifenlos; padding:100px 0; position:relative; width:100%; overflow:hidden ) .small-background-container ( position:relative; text-align :center ) .small-background-title ( Schriftgröße:40px; Farbe:#f1c40f; Schriftstärke:300; Z-Index:10; Anzeige:Inline-Block; Texttransformation:Großbuchstaben; Rand unten:20px ; Rand oben: 20 Pixel; Position:relativ; Hintergrundanhang:Bildlauf; Hintergrundwiederholung:Wiederholung-x; Hintergrundposition:oben in der Mitte ) .socials a ( Farbe:#fff ) .socials a:hover ( Farbe:# bdc3c7)

Medien-Anfragen

Damit unsere Website anpassungsfähig ist, fügen wir einige Medienabfragen hinzu.

@media screen und (max-width: 768px) ( .about-section-title ( line-height:1 ) ) @media screen und (max-width: 480px) ( .big-background-title ( font-size:58px ) .small-background-title ( line-height:1 ) /*.player( display: none;) -> Wenn Sie das Video bg auf einem bestimmten Viewport ohne Plugin entfernen möchten*/ ) @media screen und ( max-width: 360px) ( .big-background-title,#colorize ( line-height:1 ) ) @media screen und (max-width: 320px) ( .small-background-title ( font-size:30px ) )

jQuery

Schalten wir jetzt unser YouTube-Video ein. Rufen wir die Klasse an Spieler innerhalb des jQuery-Codes. Platzieren Sie den folgenden Code vor dem schließenden Body-Tag und innerhalb der Tags .
$(Funktion()( $(.player").mb_YTPlayer(); ));

Zurückfallen

Das Hintergrundvideo von YouTube wird nicht auf Mobilgeräten und Tablets abgespielt, da die YouTube-Regeln dies nicht zulassen.

Wir können jedoch jQuery verwenden, um ein Standardhintergrundbild hinzuzufügen, wenn der Browser erkennt, dass der Benutzer die Website von einem mobilen Gerät aus besucht.

Manuelle Lösung

Um festzustellen, ob der Benutzer von einem Mobil- oder Tablet-Gerät aus angemeldet ist, können wir das Element bei einer bestimmten Bildschirmgröße ausblenden. Beispielsweise möchten wir den Videohintergrund auf Bildschirmen mit einer Breite von 480 Pixel entfernen. Sie müssen nur display: none zum Player-Element hinzufügen:

@media screen und (max-width: 480px) ( .player( display: none; ) )

Was jQuery betrifft, werden wir hier die Variable setzen ist_mobil mit dem falschen Parameter. Dann stellen Sie sicher, dass die Klasse Spieler hat Anzeige: keine. Wenn ja, dann fügen Sie die Klasse hinzu großes-Hintergrund-Standardbild zu Abschnitten großer Hintergrund Und Kleiner-Hintergrund-Abschnitt um das Standard-Hintergrundbild zu verwenden. Sonst ändert sich nichts.

(function($) ( $(document).ready(function() ( var is_mobile = false; if($(".player").css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) ( ​​​​ // Bedingtes Skript hier $(.big-background, .small-background-section").addClass("big-background-default-image"); )else( $( ". player").mb_YTPlayer(); ) )); ))(jQuery);

Lösung mit jQuery-Plugin

Eine andere Möglichkeit, das Standardbild festzulegen, bietet das jQuery-Plugin. device.js(http://matthewhudson.me/projects/device.js/). Dies vereinfacht den Prozess der Beschreibung von Bedingungen für unterschiedliche Bildschirmgrößen von Mobilgeräten. Mit diesem Plugin können wir einfach den folgenden Code schreiben:

(function($) ( $(document).ready(function() ( //Device.js prüft, ob es sich um Tablet oder Mobile handelt - http://matthewhudson.me/projects/device.js/ if (!device. tablet() && !device.mobile()) ( $(.player").mb_YTPlayer(); ) else ( //jQuery fügt den Standardhintergrund der bevorzugten Klasse hinzu $(.big-background, .small- background-section").addClass("big-background-default-image"); ) )); ))(jQuery);

Hier habe ich die Methoden verwendet gerät.mobile() Und gerät.tablet() um das Gerät zu überprüfen, von dem aus sich der Benutzer angemeldet hat. Wenn die Bedingung erfüllt ist, wird die Klasse hinzugefügt großes-Hintergrund-Standardbild zu Abschnitt großer Hintergrund Und Kleiner-Hintergrund-Abschnitt. Ansonsten die Klasse Spieler bleibt unverändert und das Video wird abgespielt.

Ordnen

Videos sind eine hervorragende Möglichkeit, eine Botschaft an ein Publikum zu übermitteln. Es kann ein mächtiges Werkzeug für Ihre Website sein, wenn es richtig eingesetzt wird.

Ich bin sicher, dass mit der Weiterentwicklung und Verbesserung des Webdesigns immer mehr kreative Ideen für die Verwendung von Videos im Website-Design entstehen werden. Ich hoffe, Sie haben in diesem Tutorial etwas gelernt. Schreibe deine Gedanken und Kommentare in die Kommentare.

Von einem Übersetzer. Bei allen Wünschen und Anmerkungen zur Übersetzung wenden Sie sich bitte persönlich an mich. Danke!

Verkaufsanalysen

Integration mit Ihrer Telefonanlage

Website-Integration

Die Anbindung spezieller Widgets befreit Sie von der Notwendigkeit, Leads und Kontakte manuell in das System zu übertragen! Erstellen Sie benutzerdefinierte Formulare auf Ihrer Website. Nach dem Ausfüllen durch den Kunden wird der Kontakt oder Deal automatisch in das amoCRM-System aufgenommen.

Anwendung für iPhone oder Android

Die amoCRM-Apps für iPhone und Android haben die Möglichkeit, eine Liste von Kunden, Leads, eine Liste von Aufgaben und einen Ereignis-Feed anzuzeigen.

Bequemer Schreibtisch

amoCRM selbst zeigt automatisch alle wichtigen Diagramme an, und wenn einige Daten im Basispaket fehlen, können Sie jederzeit eine unbegrenzte Anzahl Ihrer Widget-Panels hinzufügen.

Erweiterungen und Widgets

Machen Sie das Arbeiten mit amoCRM vertraut und komfortabel! Erstellen Sie mit nur zwei Klicks Ihre eigenen E-Mail-Newsletter. Integrieren Sie amoCRM mit der Telefonie und sparen Sie Zeit für Ihre Spezialisten. Speichern Sie Ihre Dateien im praktischen Dropbox-Cloudspeicher.

Datenbank von Kunden, Unternehmen und Deals

Es enthält alle Informationen zu jedem Kunden, aktive Verhandlungen, laufende Verträge und zukünftige Verkäufe. Darüber hinaus bietet das Programm "intelligente" Suche, Tags und Filter. Jeder Deal hat einen Ereignis-Feed, der alle Notizen und Angebotsdateien speichert, und hier können Sie neue Aufgaben festlegen. Die gesamte Historie der Interaktionen mit Kunden befindet sich an einem Ort.

amoCRM hilft Ihnen sicherzustellen, dass für jeden Deal eine Aktion geplant ist, und erinnert Sie daran, wenn eine Aufgabe überfällig oder nichts geplant ist. Geben Sie den Deal ein, hinterlassen Sie eine Notiz und fügen Sie eine Aufgabe hinzu. Mission erfüllt? Einfach durchstreichen. Sie befinden sich in einer speziellen Registerkarte der Benutzeroberfläche. Hast du vergessen, Sergej anzurufen? Namens? Genau hier stellen wir fest, dass die Aufgabe abgeschlossen ist.

Vollständige Integration mit Ihrer E-Mail

Verbinden Sie eine unbegrenzte Anzahl beliebiger Postfächer und Ihre Korrespondenz wird automatisch in amoCRM angezeigt. Wir erstellen automatisch neue Deals für jeden neuen Brief des Kunden. Wir verfolgen sogar die Bearbeitungsgeschwindigkeit eingehender Anfragen.

Verkaufsanalysen

amoCRM bietet Diagramme für die Verteilung von Transaktionen nach Status, Manager oder in einem anderen für Sie geeigneten Bereich. Darüber hinaus erstellt das System Verkaufsprognosen auf der Grundlage zuvor gesammelter Statistiken und der aktuellen Situation.

Integration mit Ihrer Telefonanlage

AmoCRM wird Ihr unverzichtbarer Assistent beim Tätigen und Weiterleiten von Anrufen. Damit können Sie sich die Namen all Ihrer Kunden „merken“. Das Programm speichert auch alle Statistiken Ihrer eingehenden und ausgehenden Anrufe. Nachdem Sie eine Verbindung mit Ihrer Telefonanlage hergestellt haben, erscheint ein spezielles Telefonsymbol in der amoCRM-Oberfläche. Ein Klick und die Nummer wird automatisch auf dem Telefon des Managers gewählt. Sie können sowohl von den Listen als auch von der Kontakt- oder Geschäftskarte aus anrufen.

Vom Autor: In diesem Lernprogramm führen wir eine einfache Technik zum Erstellen eines Hintergrundbilds durch, das sich vollständig auf die volle Breite des Darstellungsbereichs des Browsers ausdehnt. Dazu benötigen wir die CSS-Eigenschaft background-size; JavaScript wird nicht benötigt.

Beispiele für reaktionsschnelle vollständige Hintergrundbilder

Heutzutage ist es sehr beliebt geworden, ein riesiges Foto als Hintergrund zu verwenden, das die gesamte Webseite einnimmt. Hier sind einige Beispiele für Websites, auf denen responsive vollständige Hintergrundbilder eingestellt sind:

Wenn Sie bei Ihrem nächsten Webprojekt ein ähnliches Ergebnis erzielen möchten, dann ist dieser Artikel genau das Richtige für Sie.

Grundprinzipien

Hier ist unser Aktionsplan.

Verwenden Sie die Eigenschaft background-size, um das Ansichtsfenster vollständig auszufüllen

Die CSS-Eigenschaft background-size ist auf cover gesetzt. Der Cover-Wert weist den Browser an, die Breite und Höhe des Hintergrundbilds automatisch und proportional zu skalieren, sodass sie immer gleich oder größer als die Breite/Höhe des Darstellungsbereichs sind.

Verwenden Sie eine Medienabfrage, um kleine mobile Hintergrundbilder zu verarbeiten

Um die Seitenladegeschwindigkeit auf kleinen Bildschirmen zu verbessern, verwenden wir eine Medienabfrage, um eine kleinere Version unseres Hintergrundbilds zu rendern. Es ist nicht obligatorisch. Diese Technik funktioniert auch ohne. Aber warum ist es eine gute Idee, ein kleines mobiles Hintergrundbild zu verwenden?

Das Bild, das ich in der Demo verwendet habe, ist 5500 x 3600 Pixel groß. Diese Auflösung ist für die meisten derzeit auf dem Markt befindlichen Breitbild-Computermonitore ausreichend. Dafür müssen Sie jedoch eine 1,7 MB große Datei verarbeiten.

Eine so enorme zusätzliche Belastung, nur um ein Hintergrundfoto zu platzieren, bringt auf jeden Fall nichts Gutes. Und das ist natürlich extrem schlecht für Verbindungen über das mobile Internet. Außerdem ist diese Auflösung für Geräte mit kleinem Bildschirm übertrieben (dazu später mehr). Werfen wir einen Blick auf den gesamten Prozess.

HTML

Alles, was Sie für das Markup benötigen, ist Folgendes:

Wir werden dem Body-Element ein Hintergrundbild zuweisen, sodass das Bild immer den gesamten Darstellungsbereich des Browsers einnimmt.

Diese Technik funktioniert jedoch auch für jedes Element auf Blockebene (z. B. ein div oder ein Formular). Wenn die Breite und Höhe Ihres Blockelements "fließend" sind, wird das Hintergrundbild immer so skaliert, dass es in den gesamten Container passt.

css

Legen Sie die folgenden Stile für das Körperelement fest:

body ( /* Pfad zum Bild */ background-image: url(images/background-photo.jpg); /* Das Hintergrundbild wird immer vertikal und horizontal zentriert */ background-position: center center; /* Das Hintergrundbild wird nicht wiederholt * / background-repeat: no-repeat; /* Das Hintergrundbild ist im Ansichtsfenster fixiert, sodass es sich nicht bewegt, wenn die Höhe des Inhalts größer als die Höhe des Bildes ist */ background-attachment: fixed; /* Dadurch kann sich das Hintergrundbild an die Größe des Containers anpassen */ background-size: cover; /* Legt die Hintergrundfarbe fest, die angezeigt wird, während das Hintergrundbild geladen wird */ background-color: #464646; )

Karosserie ( /* Pfad zum Bild */ Hintergrundbild : url (Bilder / Hintergrundfoto . jpg ) ; /* Das Hintergrundbild wird immer vertikal und horizontal zentriert */ /* Das Hintergrundbild wird nicht wiederholt */ Hintergrundwiederholung: keine Wiederholung; /* Das Hintergrundbild ist im Ansichtsfenster fixiert, sodass es sich nicht bewegt, wenn die Inhaltshöhe größer als die Bildhöhe ist */ /* Dadurch passt sich das Hintergrundbild an die Größe des Containers an */ Hintergrundgröße: Cover; /* Legt die Hintergrundfarbe fest, die angezeigt werden soll, während das Hintergrundbild geladen wird */ Hintergrundfarbe : #464646;

Das wichtigste Eigenschaft/Wert-Paar, auf das Sie achten sollten, ist:

Hintergrundgröße: Cover;

Hintergrundgröße: Cover;

Hier beginnt die Magie. Dieses Eigenschaft/Wert-Paar weist den Browser an, das Hintergrundbild proportional zu skalieren, d. h. so dass seine Breite und Höhe gleich oder größer als die Breite/Höhe des Elements (in unserem Fall das body-Element) sind.

Dieses Eigenschaft/Wert-Paar hat jedoch ein Problem: Wenn das Hintergrundbild kleiner als das body-Element ist – was auf hochauflösenden Bildschirmen und/oder wenn Sie eine große Menge an Inhalten auf der Seite haben – der Fall ist – wird der Browser unweigerlich hineinzoomen . Und wie wir wissen, nimmt die Qualität des Bildes ab, wenn wir die Abmessungen einer Bitmap erhöhen (mit anderen Worten, es kommt zu einer Verpixelung).

Das Erhöhen der Größe eines Bildes relativ zu seinen ursprünglichen Abmessungen wirkt sich auf die Qualität des Bildes aus. Beachten Sie dies bei der Auswahl des richtigen Bildes. Die Demo verwendet ein riesiges Foto mit 5500 x 3600 Pixeln für Breitbildmonitore, sodass für Qualitätsverzerrungen ein sehr großer Bildschirm erforderlich wäre. Lass uns weitermachen. Um sicherzustellen, dass das Hintergrundbild immer im Ansichtsfenster zentriert ist, schreiben wir:

Hintergrundposition: Mitte Mitte;

Hintergrundposition: Mitte Mitte;

Dieser Eintrag platziert den Hintergrund auf der Koordinatenachse in der Mitte des Ansichtsfensters. Als Nächstes müssen wir definieren, was passiert, wenn die Höhe des Inhalts die sichtbare Höhe des Darstellungsbereichs überschreitet. In diesem Fall wird eine Bildlaufleiste angezeigt.

In diesem Fall müssen wir sicherstellen, dass das Hintergrundbild auch dann an seiner ursprünglichen Position bleibt, wenn der Benutzer auf der Seite nach unten scrollt. In dieser Situation endet das Bild beim Scrollen entweder einfach oder es bewegt sich mit fortschreitendem Scrollen (was für den Benutzer sehr ablenkend sein kann). Um den Hintergrund zu reparieren, setzen wir die Eigenschaft background-attachment auf fixed.

Hintergrund-Anhang: behoben;

Hintergrund-Anhang: behoben;

In der Demo habe ich die Möglichkeit zum „Laden von Inhalten“ hinzugefügt, damit Sie sehen können, was passiert, wenn eine Bildlaufleiste im Browser angezeigt wird, wenn die Eigenschaft „background-attachment“ auf „fixed“ gesetzt ist. Sie können auch die Demo herunterladen und mit den Eigenschaften der Elementpositionierung (wie background-attachment und background-position) herumspielen, um zu sehen, wie sich dies auf das Scrollen von Seiten und das Hintergrundbild auswirkt. Die restlichen Eigenschaftswerte sind für sich genommen ziemlich selbsterklärend.

CSS-Kurzschrift

Ich habe die Hintergrundeigenschaften detailliert beschrieben, damit sie leichter erklärt werden können. Die Abkürzung wird auch äquivalent sein:

body ( hintergrund: url (background-photo.jpg) center center cover no-repeat fixed; )

Karosserie ( Hintergrund : URL ( Hintergrund - Foto . jpg ) Mitte Mitte Abdeckung nein - Wiederholung behoben ;

Alles, was Sie tun müssen, ist, den URL-Wert so zu ändern, dass er auf den Pfad zu Ihrem Hintergrundbild verweist.

Optional: Medienabfrage für kleine Bildschirme

Für kleinere Bildschirme habe ich Photoshop verwendet, um das ursprüngliche Hintergrundbild proportional auf 768 x 505 Pixel zu verkleinern, und ich habe Smush.it verwendet, um es noch ein bisschen mehr zu verkleinern. Dadurch wurde die Dateigröße von 1741 KB auf 114 KB reduziert. Diese. Bildgröße um 93 % reduziert.

Bitte nicht falsch verstehen, 114KB sind für ein rein ästhetisches Designelement immer noch ziemlich viel. Angesichts des zusätzlichen Overheads von 114 KB würde ich eine solche Datei nur verwenden, wenn ich eine Möglichkeit sehe, die Benutzererfahrung (UX) der Website erheblich zu verbessern. derzeit kommt ein beträchtlicher Teil des Internetverkehrs von mobilen Geräten. background-image: url (images / background-photo-mobile-devices. jpg) ;

Die Medienabfrage hat eine Breitenbegrenzung von max-width: 767px, was bedeutet, dass, wenn der Darstellungsbereich des Browsers größer als 767px ist, ein großes Hintergrundbild geladen wird.

Der Nachteil bei der Verwendung dieser Medienabfrage ist, dass Sie, wenn Sie die Breite Ihres Browserfensters von beispielsweise 1200 px auf 640 px (oder umgekehrt) ändern, sofort sehen, wenn das kleine oder große Hintergrundbild geladen wird.

Da einige Geräte mit kleinem Bildschirm mehr Pixel anzeigen können – beispielsweise kann das iPhone 5 mit Retina-Display eine Auflösung von 1136 x 640 Pixel anzeigen – wird das kleine Hintergrundbild verpixelt.

Zusammenfassend

Eine aktuellere Version des Quellcodes finden Sie in diesem GitHub-Tutorial. Ich kann Sie nur vor einem warnen: Bitte verwenden Sie diese Technik mit Vorsicht, da große Dateien die UX ernsthaft beschädigen können, insbesondere wenn der Endbenutzer eine langsame und unzuverlässige Internetverbindung verwendet. Auch deshalb sollten Sie eine passende Hintergrundfarbe wählen, damit der Nutzer den Inhalt lesen kann, während das Hintergrundbild geladen wird.

| 16.04.2015

Im vergangenen Jahr haben Webdesigner zunehmend damit begonnen, eine Website auf originelle Weise aufzupeppen - indem sie ein Video als Seitenhintergrund installieren. Eine interessante Handlung oder einfach nur ein „lebendiges“ Bild im Hintergrund schmückt sogar eine gewöhnliche Visitenkartenseite, interessiert den Benutzer und ermutigt ihn, länger auf der Seite zu bleiben. Heute teilen wir Ihnen eine der Möglichkeiten mit, wie Sie mit HTML5 und CSS einen Vollbild-Videohintergrund für eine Website festlegen können.

Wenn Sie fest davon überzeugt sind, dass Sie ein Video für den Hintergrund auf der Website einstellen möchten, müssen Sie einige Nuancen kennen:

1. Zunächst müssen Sie bedenken, dass das Video ein ziemlich großes Gewicht hat. Dies kann sich negativ auf die Ladegeschwindigkeit der Seite auswirken, insbesondere wenn der Benutzer eine langsame Internetverbindung hat. Wählen Sie daher Videos, die zeitlich nicht zu lang sind. Für den Fall, dass Sie ein ziemlich langes Video verwenden müssen, seien Sie darauf vorbereitet, entweder daran zu arbeiten, sein Gewicht zu reduzieren, oder dass Sie einen Teil des Publikums opfern müssen.
2. Zweitens, vermeiden Sie die automatische Wiedergabe von Audio von Videos. Verwenden Sie entweder Videos ohne Ton oder fügen Sie die Möglichkeit hinzu, dass der Benutzer den Ton bei Bedarf selbst einschalten kann. Das automatische Abspielen eines Tons beim Öffnen einer Website gilt als sehr schlechte Form.
3. Drittens müssen Sie sich um die browserübergreifende Kompatibilität und die korrekte Anzeige und Wiedergabe von Videos auf allen Geräten kümmern sowie eine Alternative zum Video bereitstellen (in Fällen, in denen es nicht abgespielt wird). Wie das geht, zeigen wir in unserem Beispiel weiter unten.
4. Und viertens sollte man sich genau überlegen, ob ein Bildtelefon an dem Ort, an dem man es aufstellen möchte, angemessen ist, da man bei diesem Unterfangen sehr leicht die Grenze zwischen Originalität und Sinnlosigkeit überschreitet. In keinem Fall sollte das Video den Benutzer von seinem Hauptziel ablenken, aufgrund dessen er auf die Website gelangt ist. Vergessen Sie beim Einstellen eines Videohintergrunds unter Textinhalten nicht, die Lesbarkeit des Textes zu überprüfen. Beispielsweise kann es an einer bestimmten Stelle der Videowiedergabe in den Hintergrund treten (weißer Text auf weißem Hintergrund, schwarzer Text auf schwarzem usw.).

1.HTML

Für unser Beispiel haben wir ein Video mit einer Auflösung von 1920 × 1080, einer Dauer von 15 Sekunden und einem Gewicht von knapp über 3 MB aufgenommen. Innerhalb des Blocks