​Embedden van de player

Voor het laatst bijgewerkt op September 27, 2018 14:13

De audio en video player van kerkdienstgemist.nl kunnen binnen een website worden geintegreerd. Daarvoor is een kant en klare embed code te verkrijgen in de beheeromgeving.

Verkrijgen van de code

Voor audio, video en het archief zijn aparte embeds 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>