Einbettungscode anpassen

Informationen darüber, wo Sie die Einbettungscodes finden können, finden Sie unter: Player auf der Kirchen-Website platzieren.

Responsiver Einbettungscode #

Passen Sie den Player an verschiedene Bildschirmgrößen an, hier einige Beispiele.

Vollständiges Beispiel #

Hier ist ein vollständiges Codebeispiel, bei dem die Live- und die Aufnahme-Einbettung responsiv sind:

<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>

<!-- Platzieren Sie Ihren Einbettungscode für Live-Übertragungen hier-->
<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>

<!-- Platzieren Sie hier Ihren eigenen Einbettungscode für Aufnahmen-->
<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>

Aufzeichnungen #

Um die Einbettung der Aufzeichnung responsiv zu machen, müssen die folgenden Parameter zur url des src-Attributs hinzugefügt werden:

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

Natürlich ohne & sollte es keinen Parameter geben (wie bei der Standard-Einbettung für Audio). Weitere Informationen zu diesen Parametern finden Sie auf dieser Seite unter src parameters > responsive

ußerdem sollte dem iframe des Players in der CSS eine maximale Breite zugewiesen werden, z. B:

iframe{max-width: 100%}

Live #

Folgendes css sollte hinzugefügt werden:

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

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
  

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"