Lynda.com Ontwerp de Web HTML-achtergrondvideo

• Mei 21, 2024

Achtergrondvideo is een geweldige manier om uw product op de markt te brengen en in deze Lynda.com videotrainingscursus getiteld Ontwerp het web: HTML-achtergrondvideo met Chris Converse leert u hoe u een autoplay-achtergrondvideo aan uw webpagina kunt toevoegen. Je leert ook hoe je CSS kunt gebruiken om andere ontwerpelementen op de achtergrondvideo te plaatsen. En de oefenbestanden zijn zelfs voor het standaardlidmaatschap gratis.

Converse begint met een html-bestand met kale botten en bouwt de belangrijkste div-container voor de ontwerpelementen: de teksttagline, het logo svg en de video. Hij laat zien hoe je autoplay in de videotag kunt gebruiken en hoe je de twee meest voorkomende soorten video kunt instellen, .mp4 en .ogg.

Vervolgens gaat Converse naar de CSS-bestanden en de CSS om de video en de gecentreerde logo-afbeelding te stijlen en te positioneren. Hij gaat verder om hetzelfde te doen voor de slogan. Ik vond vooral zijn techniek om met randen te werken leuk.

Converse bespreekt vervolgens hoe u deze lay-out responsief kunt maken met behulp van mediaquery's voor middelgrote en kleine schermen en CSS. Nogmaals, hij stelt stijlen in voor de video, het logo en de slogan. Hij laat ook zien hoe je een vervangende afbeelding kunt instellen voor kleine schermen die geen video kunnen afspelen en hoe je de video kunt verbergen.

Converse gaat verder met complexere problemen en demonstreert hoe JavaScript kan worden gebruikt om complexere controle over de weergave toe te voegen voor functies van mobiele apparaten, zoals aanraakgebeurtenissen. Hij introduceert een externe website genaamd Modernizr die CSS-klassen genereert die via JavaScript aan de pagina kunnen worden toegevoegd op basis van de functies van het huidige apparaat. Hij laat zien hoe de code te genereren, downloaden en toevoegen aan uw webpagina code.

In de laatste les laat Converse zien hoe de positie en andere stijlen voor de lay-out kunnen worden gecodeerd zodat de video het hele browservenster bedekt.

Deze cursus ging over de HTML en CSS die worden gebruikt om een ​​achtergrondvideo voor web- en mobiele apparaten te stijlen en te positioneren. Ik hoopte echter dat de auteur opties zou bespreken voor het hosten en optimaliseren van het videobestand voor snelle download. Het zou ook leuk zijn om te weten hoe je interactieve ontwerpelementen kunt toevoegen aan de achtergrondvideo in plaats van alleen statische elementen.

Chris Converse is afgestudeerd in grafisch ontwerp aan het Rochester Institute of Technology en heeft 22 jaar ervaring in ontwerp en technologie.

//www.lynda.com/HTML-tutorials/Design-Web-HTML-Background-Video/373560-2.html

Openbaarmaking: ik werd niet financieel gecompenseerd voor dit artikel. De meningen zijn volledig van mij op basis van mijn ervaring.