Widget implementeren

Onze Vimeo- en YouTube widget is gemakkelijk te plaatsen op je eigen website. Deze widget werkt alleen op de embedded video’s die op je website staan als je audiodescriptie hebt toegevoegd in Scribit.Pro. 

Om dit te implementeren op je eigen website dien je een aantal stappen te doorlopen.

  1. Upload je YouTube-video in jouw dashboard van Scribit.Pro
  2. Beschrijf de video met audiodescriptie en ondertiteling
  3. Download eenmalig de bestanden (dit is voor ons systeem het sein dat je klaar bent)
  4. Plaats eenmalig onze widgetcode in je websitecode.
  5. Embed de YouTube-video op je website met de embedcode die je vindt in het dashboard onder instellingen. .

Implementatie instructies

Plaats het onderstaande <script>-codefragment in de <body>-tag van de HTML-uitvoer van je webpagina, zo dicht mogelijk bij de closingtag </body>

Gebruik je WordPress? Installeer dan plugin ‘Head & Footer Code’ in je WordPress website. Daar kun je het codefragment plaatsen in het invoerveld ‘FOOTER Code’ van de instellingen van de plugin. De plugin zorgt dan dat het fragment op elke pagina in de footer staat.

Heb je een statische website? Dan dien je er middels het aanpassen van de broncode voor te zorgen dat het fragment juist geplaatst wordt.

Let op: Het fragment moet op elke pagina staan waar je YouTube-video’s toegankelijk wil maken. Het verschilt per website-implementatie of dat op 1 locatie is in te regelen of dat het op meerdere plaatsen moet. De ontwikkelaar van jouw website kan je daarmee helpen.

Responsive insluitingen

Veel websites gebruiken responsive insluitingen, wat ervoor zorgt dat video’s zichzelf automatisch aanpassen aan een specifieke scherm- of venstergrootte. In de meeste gevallen gebruiken websites een parent/wrapper-element dat ervoor zorgt dat de video zijn verhouding behoudt.

Dit soort wrapper-elementen kunnen ervoor zorgen dat de widget niet (correct) wordt weergegeven. De widget kan zodanig geconfigureerd worden om dergelijke wrapper-elementen te ondersteunen. Om een responsieve wrapper te configureren, kan je een CSS selector als wrapper attribute in een object meegeven als tweede argument in de widget constructor.

Als je gebruik maakt van dergelijke wrappers, kan je op de pagina van de widget code in het dashboard een css-selector invullen, waarna het codefragment zich zal aanpassen om met de opgegeven wrapper te werken.

<script type="text/javascript">
    (function(s, w, i, d, g, e, t) {
        s['initScribitWidget'] = function(){s['scribitWidget']=new s.scribit.widget(g, { contrast: true })};
        e = w.createElement(i); e.type='text/javascript'; e.src=d; e.defer=true;
        t = w.getElementsByTagName(i)[0]; t.parentNode.insertBefore(e, t);
    })(window, document, 'script', '//widget.scribit.pro/main.js', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');
</script>

Dit codefragment wordt specifiek gegenereerd voor jouw account. Daarbij worden de xxx-en in de code vervangen voor jouw ID-code. Deze is bekend bij Scribit.Pro. Onder het hamburger menu van je dashboard vind je onder het kopje YouTube widget jouw specifieke code.

Om te tonen moet je wel verrijken

De extra balk onder je video werkt alleen voor video’s die onder jouw account toegankelijk zijn gemaakt op Scribit.Pro. Als je dit gedaan hebt dien je de bestanden van de video’s tenminste 1 keer gedownload te hebben, zodat deze gegenereerd zijn voor gebruik in de widget.

Speler insluiting

Bij het insluiten van YouTube-video’s, zal de URL in het src attribuut aangepast moeten worden. Hier moeten de volgende query parameters toegevoegd worden: enablejsapi=1&disabledkb=1&playsinline=1

Voor een volledige werking op mobiele apparaten zal de query parameter playsinline=1 ook toegevoegd moeten worden. Daarnaast is het nodig om de picture-in-picture optie uit de allow attribute te halen.

De embedcode ziet er dan als volgt uit:


<iframe src=”https://www.youtube.com/embed/abc1235GHJ?enablejsapi=1&playsinline=1&disablekb=1″ frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope” allowfullscreen=”O”></iframe>

Geen balk te zien?

Mocht je geen balk zien of zijn de knoppen niet zichtbaar, dan kan dit verschillende oorzaken hebben:

  • Het <script> code fragment is niet in je website of op de pagina geplaatst

Oplossing: Zorg dat je dit alsnog doet

  • De embed code is nog niet voorzien van de ‘enablejsapi’ en/of ‘playsline’ optie

Oplossing: Zorg dat je dit alsnog doet

  • Er is geen ‘AD’-knop zichtbaar

Oplossing: Er is geen AD gemaakt in Scribit.Pro, dit kun je alsnog doen

  • Of: Het bestand is wellicht nog niet gedownload, doe het voor de zekerheid nog een keer
  • De video is niet beschreven onder het gekoppelde account

Oplossing: Laat Scribit.Pro weten onder welk account de video is beschreven en welk account gekoppeld is aan de website. Wij kunnen de video voor je verplaatsen zodat hij wel zichtbaar wordt.

Geavanceerde implementatie

In sommige gevallen kunnen video embeds op je website dynamisch geladen worden. In deze gevallen moet de widget handmatig aangeroepen worden om de dynamisch gewijzigde DOM veranderingen te doorzoeken op video embeds.

Hierbij kan de scan functie van de widget als volgt aangeroepen worden:

window.scribitWidget.scan(element);

Hierbij moet parameter ‘element’ een HTML-element zijn welke de widget kan doorzoeken.

Vimeo Widget

Indien je de video’s op je website vanuit Vimeo wil tonen, is er nog geen mogelijkheid om de geproduceerde audiodescriptie hierin te uploaden. Scribit.Pro heeft daar een oplossing voor gevonden; de Vimeo widget. Door een stukje code op je website toe te voegen, wordt er bij het laden van een Vimeo-video een extra balk getoond. Hierin wordt een ‘AD’-knop aangeboden en is het mogelijk om het tekstalternatief uit te klappen.

Dit ziet er als volgt uit:


<p><iframe src="https://player.vimeo.com/video/534801496?color=efc300" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe></p>

Om dit te implementeren op je eigen website dien je een aantal stappen te doorlopen.

  1. Upload de video in het Scribit.Pro dashboard
  2. Beschrijf de video met audiodescriptie en ondertiteling
  3. Download eenmalig de bestanden (dit is voor ons systeem het sein dat je klaar bent)
  4. Koppel je Vimeolink aan je video onder instellingen in je dashboard
  5. Plaats eenmalig onze widgetcode in je websitecode.
  6. Voeg de parameter keyboard=0 aan de Embedcode van de Vimeo-video toe en plaats de code waar je de video wilt plaatsen op je website.

Bij jouw video op je website zal nu ook de extra balk zichtbaar zijn.

Voorbeelden van video's met de Youtube widget vind je op deze pagina: https://scribit.pro/voorbeelden

Kom je er niet uit? 

Neem dan vooral contact met ons op via support@scribit.pro.