Léon
Léon Gotjé
Geplaatst op 21-08-2024

[Update] Verbeterde video headers

Vandaag heb ik een leuke update voor Marketheme uitgerold. Sommigen van jullie wisten misschien al dat het mogelijk was om een video in je header te tonen, maar dit werd eigenlijk nog niet gebruikt.

Deze week ontving ik een verzoek van een Marketheme gebruiker die dit graag wilde toepassen, maar niet helemaal tevreden was met hoe het er uit kwam te zien. Op basis van zijn feedback ben ik aan de slag gegaan met het verbeteren van deze functionaliteit.

Op je pagina vind je nu onder "Pagina instellingen" een URL veld waar je de link naar een video kan plaatsen. Indien deze is ingevuld, wordt de video in je header weergegeven.

Het mooie van deze vernieuwing, is dat het met 3 verschillende video's werkt. Zo kan je een link opgeven naar een eigen (mp4) video welke je (extern) geüpload hebt . Deze wordt vervolgens in een HTML5 element op je website weergegeven.

De andere optie is het opgeven van een YouTube of Vimeo URL. Marketheme zal op de achtergrond zelf detecteren dat het hier om een YouTube of Vimeo URL betreft en op basis daar van een iFrame opbouwen.

Uniek ten opzichte van vele andere websites is dat de YouTube en Vimeo video's er best goed uit zien. Vaak oogt het wat onprofessioneel, omdat je nog delen van de videospeler terug ziet. Binnen Marketheme is dat tot een minimum beperkt gebleven.

Alle video's worden automatisch afgespeeld en de audio is gedempt (verplichting vanuit de browser, om autoplay toe te staan).

Genoeg technische uitleg. Ik laat jullie graag een voorbeeld van alle 3 de videoheaders zien:
https://wpstartpagina.nl/videoheader-1/
https://wpstartpagina.nl/videoheader-2/
https://wpstartpagina.nl/videoheader-3/

Ik ben erg benieuwd hoe jullie dit gaan toepassen.

PS. Voor het mooiste resultaat dien je wel een uitgelichte afbeelding in te stellen, zodat deze o.a. weergegeven wordt wanneer de video nog niet ingeladen is.

Reacties (2)
  • Léon
    Léon Gotjé
    Gereageerd op 21-08-2024

    Vandaag heb ik een leuke update voor Marketheme uitgerold. Sommigen van jullie wisten misschien al dat het mogelijk was om een video in je header te tonen, maar dit werd eigenlijk nog niet gebruikt.

    Deze week ontving ik een verzoek van een Marketheme gebruiker die dit graag wilde toepassen, maar niet helemaal tevreden was met hoe het er uit kwam te zien. Op basis van zijn feedback ben ik aan de slag gegaan met het verbeteren van deze functionaliteit.

    Op je pagina vind je nu onder "Pagina instellingen" een URL veld waar je de link naar een video kan plaatsen. Indien deze is ingevuld, wordt de video in je header weergegeven.

    Het mooie van deze vernieuwing, is dat het met 3 verschillende video's werkt. Zo kan je een link opgeven naar een eigen (mp4) video welke je (extern) geüpload hebt . Deze wordt vervolgens in een HTML5 element op je website weergegeven.

    De andere optie is het opgeven van een YouTube of Vimeo URL. Marketheme zal op de achtergrond zelf detecteren dat het hier om een YouTube of Vimeo URL betreft en op basis daar van een iFrame opbouwen.

    Uniek ten opzichte van vele andere websites is dat de YouTube en Vimeo video's er best goed uit zien. Vaak oogt het wat onprofessioneel, omdat je nog delen van de videospeler terug ziet. Binnen Marketheme is dat tot een minimum beperkt gebleven.

    Alle video's worden automatisch afgespeeld en de audio is gedempt (verplichting vanuit de browser, om autoplay toe te staan).

    Genoeg technische uitleg. Ik laat jullie graag een voorbeeld van alle 3 de videoheaders zien:
    https://wpstartpagina.nl/videoheader-1/
    https://wpstartpagina.nl/videoheader-2/
    https://wpstartpagina.nl/videoheader-3/

    Ik ben erg benieuwd hoe jullie dit gaan toepassen.

    PS. Voor het mooiste resultaat dien je wel een uitgelichte afbeelding in te stellen, zodat deze o.a. weergegeven wordt wanneer de video nog niet ingeladen is.

    Screenshot_1.jpg
  • Léon
    Léon Gotjé
    Gereageerd op 21-08-2024

    Hoe kan ik het beste extern een video hosten?
    Wanneer je het meest professionele resultaat wil behalen dan raad ik je aan om de video zelf op een externe host te plaatsen. Hier een aantal suggesties:

    Google Drive (door middel van de Direct Link): https://sites.google.com/site/gdocs2direct/

    Ook kan je gebruik maken van Vimeo Pro, Amazon S3, Google Cloud, Microsoft Azure voor het hosten van bestanden (en dus ook video's).