Aanpassen embed code

Informatie over waar u de de embed-codes vindt leest u op onze pagina: Op website kerk plaatsen

Responsive embed code #

De responsive embedcode maak de speler aanpasbaar aan verschillende schermgroottes.
Hieronder vindt u een aantal situaties waarin u de code kan toepassen:

Volledig voorbeeld #

Onderstaand een volledig voorbeeld van code waarbij de live en opname embed responsive zijn:

<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%;
 }

 iframe{max-width: 100%}
</style>

<!-- Plaats hier uw embed code voor live uitzendingen-->
<div class="kdgm-responsive-player">
 <iframe scrolling="no" height="360" width="640" allowTransparency="true" frameborder="0" borderwidth="0" borderheight="0" allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen"
 src="//kerkdienstgemist.nl/streams/{:id}/embed" >
 </iframe>
</div>

<!-- Plaats hier uw aangepaste embed code voor opnames-->
<iframe scrolling="no" width="640" height="560" allowTransparency="true" frameborder="0" borderwidth="0" borderheight="0" allowfullscreen="allowfullscreen" mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen"
 src="//kerkdienstgemist.nl/playlists/{:id}/embed?media=video&playerheight=0&fluid=true&aspectratio=16:9">
</iframe>

Opnames #

Om de opname embed responsive te maken moeten de volgende parameters worden toegevoegd aan de url van het src attribuut:

&playerheight=0&fluid=true&aspectratio=16:9

Uiteraard zonder de & mochten er geen parameters voor staan (zoals bij de standaard embed voor audio). Meer informatie over deze parameters op deze pagina onder src parameters > responsive.

Ook moet de iframe van de speler een maximale breedte krijgen in de css, bijvoorbeeld:

iframe{max-width: 100%}

Live #

De volgende css moet toegevoegd worden:

.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%;
}

Een div met de class kdgm-responsive-player wordt automatisch aan de embed codes voor live uitzendingen toegevoegd.

Aanpassen code speler #

De volgende attributen van het iframe zijn aan te passen:

• width=X en height=X - Getal
  Dit is de breedte en hoogte van het iframe. Afhankelijk van het type embed code geven wij hier standaard een waarde. Dit is eventueel met CSS aan te passen.
• src - Verplicht
  Dit is de URL van de daadwerkelijke embed pagina (om deze url te verkrijgen zie: Op website kerk plaatsen). 
  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.

src parameters #

Aan de src URL kunnen een aantal parameters worden meegegeven:

Live embed #

Alleen van toepassing voor live uitzending:

• autostart=false - true/false
  Standaard start de mediaspeler automatisch met afspelen. Wanneer de autostart=false parameter is meegegeven dan moet de gebruiker eerst op de Play knop drukken om het afspelen te starten.

Opnames embed #

Alleen van toepassing voor opnames:

• playerheight=X - Getal
  Geef de de hoogte op van de speler
• per_page=X - Getal (maximaal 20)
  Geeft aan hoeveel opnames er per pagina (dus voordat er op volgende geklikt moet worden) zichtbaar zijn
   
• limit=X - Getal
  Geeft het totaal van de beschikbare opnames in de speler aan
   
• media=video - video/audio
  De embed code geeft standaard een lijst met audio opnames weer, voeg deze parameter toe om de lijst met video opnames te tonen. Daarna zal het formaat van de speler aangepast moeten worden.
   
• filter[public]=true - true/false
  Door deze parameter toe te voegen worden alleen de publiek opnames in de lijst getoond.
  Standaard worden alle opnames, publiek en besloten, in de lijst van opnames getoond. De besloten opnames (met slotje) zijn dan alleen beschikbaar voor personen die toegang hebben.

Responsive #

Bepaalt hoe de speler zich gedraagt op schalende (responsive) websites.

• fluid en responsive - true/false
  Zie onderstaand informatie 
   
• aspectratio=X:Y - Getal:getal
  Zie onderstaand informatie

Bekende problemen #

• Full screen werkt niet
  Fullscreen werkt niet in sommige browsers zonder de HTML5 doctype tag: <!DOCTYPE html>
  Sinds 12 december 2016 is er een nieuwe embed code. Daarin staat het extra attribuut allowfullscreen="true", zonder dit attribuut werkt fullscreen niet.
  
• Automatisch afspelen werkt niet (meer) in Chrome
  Chrome heeft de beveiliging opgevoerd en speelt media niet meer automatisch af tenzij er al media op de pagina is afgespeeld. Omdat de speler via een iframe op een andere website staat moet de volgende tag op het iframe staan: allow="autoplay; fullscreen"