EPAPP intro
Preview · nog niet live

EPAPP intro

1920 × 1080 · 62,5 seconden · zonder geluid · beelden van epapp.nl

0:00 / 1:02
0:00.0 / 1:02.5

Klik op een scène om ernaar te springen, of sleep de schuifbalk. Spatiebalk speelt af of pauzeert. Geluid: klik ergens op de pagina (of op Klik voor geluid); browsers spelen pas geluid af na een klik. Op een iPhone ook de stille modus uitzetten.

Op de website (WordPress)

Gebruik de losse embedversie. Die toont alleen de video met afgeronde hoeken, past zich aan elke breedte aan, speelt automatisch in een lus en pauzeert als hij buiten beeld is. Onderin staan afspelen/pauze, een voortgangsbalk, geluid en volledig scherm; die knoppen verdwijnen tijdens het afspelen en komen terug zodra je de muis beweegt. Klikken op de video pauzeert ook. Het lettertype zit in het bestand, dus er gaat geen verzoek naar Google.

  1. Download epapp-intro-embed.html __SIZE_EMBED__
  2. Upload het bestand via SFTP of de bestandsbeheerder van je hosting naar /wp-content/uploads/epapp-intro/. De mediabibliotheek van WordPress weigert .html-bestanden.
  3. Zet epapp-intro-720p.mp4 (uit het downloadmenu hierboven) in dezelfde map. Die gebruikt de knop volledig scherm op een iPhone: iOS kan alleen een video schermvullend tonen, geen webpagina. Zonder dit bestand opent de knop daar de video in een nieuw tabblad. Van de MP4 laadt vooraf alleen een klein stukje; de rest pas als iemand op die knop tikt.
  4. Voeg op de pagina een blok Aangepaste HTML toe en plak deze code:
<div style="position:relative;width:100%;aspect-ratio:16/9;">
  <iframe src="/wp-content/uploads/epapp-intro/epapp-intro-embed.html"
          title="EPAPP intro" loading="lazy" allow="autoplay; fullscreen" allowfullscreen
          style="position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;"></iframe>
</div>

Staat het bestand ergens anders, pas dan het pad bij src aan. loading="lazy" zorgt dat de video pas laadt als een bezoeker in de buurt scrolt.

Werkt het niet? Controleer of https://jouwsite.nl/wp-content/uploads/epapp-intro/epapp-intro-embed.html los in de browser opent. Blijft het iframe leeg, dan blokkeert een beveiligingsplugin of de hosting misschien het laden van eigen pagina's in een iframe (X-Frame-Options). Zet dat dan op SAMEORIGIN.