Uitgebreide info over het gebruik van de embed-code

Voor het laatst bijgewerkt op April 08, 2019 11:55

De audio en video player van kerkdienstgemist.nl kunnen binnen een website worden ge├»ntegreerd. Daarvoor is een kant en klare embed code te vinden in de beheeromgeving.

Opvragen van de code

Voor de audio- en video-uitzending en het archief zijn aparte embed codes beschikbaar. Deze zijn te vinden bij de desbetreffende kanaal/archief-pagina onder de knop Embed-code.

Plaatsen van de code

Het code fragment betreft een IFRAME wat wil zeggen dat er op de plek waar deze wordt geplaatst een kader wordt gegenereerd waarin de player wordt vertoond.

Aanpassen van de code

De volgende elementen zijn aan te passen

  • width en height Verplicht
    Dit is de breedte en hoogte van de player, voor video is deze standaard 640 x 360 (16:9) of 640 x 480 (4:3), voor audio 640 x 200. Als men deze wil aanpassen dient men voor video rekening te houden met de verhouding van het beeld, dit is 4:3 of 16:9
  • src Verplicht
    Dit is de URL van de daadwerkelijke embed pagina.
    Deze begint niet met een http:// of https:// maar met //. Dit wordt een "protocol-relative URL" genoemd en is geldige html. Hiermee kan een player in beveiligde en onbeveiligde sites worden geplaatst.

Bekende problemen

  • Full screen werkt niet op Internet Explorer 9/10

    Sinds 12 december 2016 word er een nieuwe versie van de JW Player gebruikt. Hierin is support voor IE9/10 met Flash vervallen. Advies is om een nieuwere of andere browser te gebruiken.

  • Full screen werkt niet 
    Sinds 12 december 2016 is er een nieuwe embed code. Daarin staat het extra attribuut allowfullscreen="true". Zonder dit attribuut kan de player niet naar full screen. Tevens werken sommige browsers niet zonder de HTML5 doctype tag:<!DOCTYPE html>
  • Automatisch afspelen werkt niet (meer) in Chrome
    Chrome heeft de beveiliging verder opgevoerd. Het speelt media niet meer automatisch af. Tenzij je meerdere malen op dezelfde website media hebt afgespeeld. Als de speler via een iframe op een andere website staat moet de volgende tag op het iframe staan: allow="autoplay; fullscreen"

Extra opties:

Er kan worden ingesteld dat de player mee schaalt als de pagina wordt vergroot of verkleind. Deze wordt dan 'responsive'.

Maak de player responsive door deze code in de pagina bij te plaatsen:

<style>
.kdgm-responsive-player {
    position: relative;
    padding-bottom: 56.25%; /* 75% voor 4:3 video */
    height: 0;
    overflow: hidden;
}
.kdgm-responsive-player iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="kdgm-responsive-player">
    <!-- Plaats hier de <iframe> embed code -->
</div>