Aanpassen embed code

Voor informatie over waar de embed-codes te vinden zijn, zie: Op website kerk plaatsen

Responsive embed code #

Maak de speler aanpasbaar aan verschillende schermgroottes, hieronder volgen een aantal voorbeelden.

Volledig voorbeeld #

Hieronder zijn de losse code wijzigingen die nodig zijn voor opname en live embed te vinden.

Hier 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 en height - 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 - True/false
    Geeft aan of het afspelen van een live uitzending direct moet starten

Opname embed #

Alleen van toepassing voor opnames:

  • playerheight - Getal
    Geef de de hoogte op van de speler
  • per_page - Getal (maximaal 20)
    Geeft aan hoeveel opnames er per pagina (dus voordat er op volgende geklikt moet worden) zichtbaar zijn
  • limit - Getal
    Geeft het totaal van de beschikbare opnames in de speler aan
  • media - "Video"
    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.

Responsive #

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

  • fluid en responsive - True/false
    Zie onderstaand informatie
  • aspectratio - Getal:getal
    Zie onderstaand informatie

De parameters fluid, responsive en aspectratio zijn specifieke parameters voor de videojs mediaspeler. Let op dat u playerheight op 0 zet als u deze parameters gebruikt.
Meer informatie over toepassing van deze parameters zie: https://docs.videojs.com/tutorial-layout.html

Zie hierboven voorbeeld code voor een responsive player.

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"
Speler op website kerk plaatsen Directe link speler