Implement widget

Our Vimeo and YouTube widget is easy to place on your own website. This widget only works on the embedded videos that are on your website if you have added an audio description in Scribit.Pro. 

YouTube widget

To implement this on your own website, you have to go through a number of steps.

  1. Upload your YouTube video to your Scribit.Pro dashboard
  2. Describe the video with an audio description and subtitles
  3. Download the files once (this is the signal for our system that you are ready)
  4. Place our widget code in your website code once.
  5. Embed the YouTube video on your website with the embed code found in the settings dashboard.

Implementation instructions

Place the <script> code snippet below in the <body> tag of your webpage's HTML output, as close as possible to the </body> closing tag

Are you using WordPress? Then install the "Head & Footer Code" plugin in your WordPress website. There, you can place the code snippet in the "FOOTER Code" input field of the plugin's settings. The plugin then makes sure the snippet is in the footer on every page.

Do you have a static website? In that case, you must ensure that the excerpt is placed correctly by modifying the source code.

Please note: The snippet must be on every page where you want to make YouTube videos accessible. Whether this can be set up in one location or whether it has to be set up in several places varies from one website implementation to another. The developer of your website can help you with that.

Responsive embedding

Many websites use responsive embedding, which ensures that videos automatically adjust themselves to a specific screen or window size. In most cases, websites use a parent/wrapper element that ensures that the video maintains its ratio.

These types of wrapper elements can cause the widget to not display (correctly). The widget can be configured to support such wrapper elements. To configure a responsive wrapper, you can pass a CSS selector as a wrapper attribute in an object as the second argument in the widget constructor.

If you use such wrappers, you can enter a CSS selector on the widget code page in the dashboard, and the code snippet will adjust to work with the specified wrapper.

<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>
This code snippet can be generated specifically for your account. Log in to replace the xxx's with your Scribit ID

This snippet is generated specifically for your account. In addition, the xxx's in the code will be replaced with your ID code. This is known to Scribit.Pro. Under the hamburger menu of your dashboard, you will find your specific code under the YouTube widget heading.

To display you have to enrich

The extra bar below your video only works for videos made accessible under your account on Scribit.Pro. Once you have done this, you need to have downloaded the files of the videos at least once in order for them to be generated for use in the widget.

Player embedding

When embedding YouTube videos, the URL in the src attribute will need to be modified. The following query parameters must be added here: enablejsapi=1&disabledkb=1&playsinline=1

For full operation on mobile devices, the query parameter playsinline=1 must also be added. In addition, it is necessary to remove the picture-in-picture option from the allow attribute.

The embed code looks like this:

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

Can't see a bar?

If you do not see a bar or the buttons are not visible, there may be several reasons for this:

  • The <script> code snippet has not been not placed in your website or on the page.
    Solution: Make sure you do this
  • The embed code does not yet include the "enablejsapi" and/or "playsline" option.
    Solution: Make sure you do this
  • No "AD" button is visible.
    Solution: No AD was created in Scribit.Pro, so you can do this. Or: The file may not have been downloaded yet, simply do it again to be sure
  • The video is not described under the linked account.
    Solution: Let Scribit.Pro know under which account the video is described and which account is linked to the website. We can move the video for you to make it visible.

Advanced implementation

In some cases, video embeds can be dynamically loaded on your website. In these cases, the widget must be called manually to search the dynamically modified DOM changes on video embeds.

The scan function of the widget can be called as follows:

window.scribitWidget.scan(element);

Here, the "element" parameter must be an HTML element that the widget can search.

Below is an example how you could implement this with React and TypeScript: 

import React, { useRef, useEffect } from "react";

// a custom type in our CMS, use whatever you have aviailable
// the gist is that we're providing the raw embedded HTML snippet from the trusted CMS
type YoutubeVideoProps = {
  embedHTMLCode: string;
};

export default function YoutubeVideo({ embedHTMLCode }: YoutubeVideoProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (ref.current) {
      // once we have a reference to the DOM element, we can ask the widget to scan it
      window.scribitWidget?.scan(ref.current);
    }
  }, [ref]);

  return <div ref={ref} dangerouslySetInnerHTML={{ __html: embedHTMLCode }} />;
}

Still stuck? 

Please contact us via support@scribit.pro.

Vimeo widget

To implement this on your own website, you have to go through a number of steps.

  1. Upload the video in the Scribit.Pro dashboard
  2. Describe the video with an audio description and subtitles
  3. Download the files once (this is the signal for our system that you are ready)
  4. Link your Vimeolink to your video under Settings in your dashboard
  5. Place our widget code in your website code once.
  6. Add the keyboard=0 parameter to the embed code of the Vimeo video and place the code where you want to place the video on your website.

The additional bar will now also be visible for your video on your website.