Documentation Dynamic Video Player

Documentation for the Dynamic Video Player block plugin

About video types and streaming

MP4 video and different formats

• The Dynamic Video Player plugin plays MP4 videos,
• Professional hosting providers like Bunny and Gumlet also provide MP4 streams.
  • Note: In both Bunny and Gumlet you have to activate it before uploading your videos.
• It not only plays videos in standard ratios (formats), but also plays square or portrait MP4 videos.
  • Nowadays there are social media channels that use different-sized videos.
• Those different-sized videos are played as they should: without black bars.

HLS Playlist from Bunny

• The disadvantage of the .m3u8 video extension is that it is incompatible with many browsers (Chrome, Firefox, Edge, and others) and is natively supported by Safari only.
• Bunny provides an .m3u8 stream, but they provide a fallback if you know how. We do.
• The Dynamic Video Player block plugin analyzes the .m3u8 file: if it is provided by Bunny, the video block offers you a toggle to convert the video frontend to MP4 so that it plays in all browsers. If the stream is not from Bunny, it tells you to use a normal MP4 video instead. Note: it uses the default resolution of 720p.

HLS Playlist from Gumlet

• The disadvantage of the .m3u8 video extension is that it is incompatible with many browsers (Chrome, Firefox, Edge, and others) and is natively supported by Safari only.
• Gumlet provides an .m3u8 stream as well (and MP4 if set at Processing Settings).
• The Dynamic Video Player block plugin analyzes the .m3u8 file: if it is provided by Gumlet, the video block activates a browser script that plays the video. The Dynamic Video Player Block also provides a toggle that makes sure it presents pure HLS to Safari browsers; usually that is not necessary.

oEmbed URL (YouTube, Vimeo, Livid, Bunny)

• The Dynamic Video Player plays oEmbed URL videos.

Video Poster

• If you offer a video to your visitors, you’ll need to provide a video poster as well. A video poster is a placeholder image that displays on a video player before playback begins. Also see the text about the automatic fetching of the video poster.
• The plugin can use video posters by URL, the Media Library, fetching from the hosting or none.

Show a company logo on the video-poster

• Dynamic Video Player offers a wonderful customization feature: the ability to show a logo (like a company logo, training, image of the trainer, etc) on top of the video poster.
• This option is not applicable for the circular video-poster.
• You can select from those 4 locations: top-left, top-right, bottom-left, and bottom-right.
• Works with .png and .webp images with a transparent background around it.
• The width is totally adjustable, with an 80px default.

Dynamic Video Player block and automatic fetching of the video poster

• Dynamic Video Player block can automatically fetch the video poster from Vimeo, YouTube, Bunny, Livid and Gumlet.
• It offers a Fetch button and the option to add it as the clickable video poster.
• Important: the video must be set to public or allowed domain, and “Block direct URL file access” should be turned off; otherwise this will not work. But those settings are necessary anyway to show the video at all to your visitors.

You don’t have a video poster

• If you do not provide a poster file or URL (or forgot), the Dynamic Video Player shows a neutral default poster in a 16:9 ratio with a video play icon.

Dynamic .webp preview video poster

• Some video hosting companies offer the possibility to show a dynamic WebP poster (like Bunny and Gumlet).
• A dynamic webp poster is like a moving image; a short video, but in a different format.
• The Dynamic Video Player plugin supports showing a video poster preview based on dynamic preview.webp.

Popup

• The Dynamic Video Player block always shows your video in a popup.
• You can set the width of the popup yourself.
• However, keep in mind that the width can never exceed the video resolution.
• The default value is 720px.

Popup by custom trigger

• The Dynamic Video block allows you to set a custom trigger.
• Set the video poster to None or you can keep it active (poster and trigger can be combined).
• Set a unique class in the ‘popup trigger’ tab, like: demo-video-1 (without a . period).
• Place a trigger block like a button, image, text, icon, or any other block on the page or on the template and assign the same class in the Advanced / Additional CSS class(es) field.
• If you combine this with a video block in a footer of another site-wide element and a custom field as a source, it’s possible to use the same trigger sitewide with a unique video URL per post.
• If you use a trigger that has no default hover effect (like a button or URL), you can add this simple CSS to the Additional CSS field, and add the class: pointer to the Additional CSS class(es) field.

.pointer { 
cursor: pointer; }

Autoplay

• The Dynamic Video Player block offers a toggle for Auto-play.
• Auto-play with sound or without (muted) depends on the video origin (Bunny, YouTube, Vimeo, etc.) and the browser settings.
• Opening the popup still requires a manual click; only then does auto-start work.

What URL sources are acceptable?

• The Dynamic Video Player block plugin needs 2 fields to show your video: the video URL and the poster URL ***.
• You can provide those URLs manually in the source fields or use custom fields to offer the necessary URLs.

*** If you use a custom trigger (see explanation elsewhere), you don’t need a video-poster.

Dynamic Video Player plugin & custom fields

• The plugin has been tested with ACF, SCF, ACPT, Meta Box and Modern Fields.
• The Dynamic Video Player block accepts the following custom field types.

• Text field
• Textarea field
• Rich text field

Use a video site-wide

• You can place a video block (hidden in the footer or in another side-wise available element) and place a site-wide trigger. Ideal for a promo video for example.

How to create a site-wide available video

1. Place the video block in the footer in a site-wide element (can also be a page-type template or product-template).
2. Set the video poster to None.
3. Place a trigger block like a button, image, text, icon, or any other block on the template or the sitewide element
4. The Dynamic Video block allows you to set a custom trigger. At the block settings / Popup trigger.
5. Use a unique name for every class you use, (without a . period).
6. Assign the same class in the Advanced / Additional CSS class(es) field of the trigger.
7. Done.

How to create a site-wide available trigger with a unique video set per page

1. Place the video block in the footer in a site-wide element (can also be a page-type template or product-template).
2. Set the Video source to Custom field (dynamic)
3. Select a custom field you previously created (text field is fine).
4. Set the video poster to None.
5. Place a trigger block like a button, image, text, icon, or any other block on the template or the sitewide element
6. The Dynamic Video block allows you to set a custom trigger. At the block settings / Popup trigger.
7. Use a unique name for every class you use, (without a . period).
8. Assign the same class in the Advanced / Additional CSS class(es) field of the trigger.
9. Set a video-url on every post where you like to show a video.

Note: If you are not placing / showing a video on every page that shows the video trigger, you need to set conditions on the trigger-block. Otherwise the visitor will see a trigger (like a button) that doesn’t do anything.

Structure of the video source URL

Vimeo video example

https://vimeo.com/449787858

YouTube video example

https://www.youtube.com/watch?v=wTFAqjxaYOI

Livid video example

https://livid.com/watch/OJLaEGCJ-RBL

Bunny video examples

https://vz-9dd84dca-a55.b-cdn.net/feb8139c-25fd-4bbd-a37c-9193c643718c/play_720p.mp4

https://vz-9dd84dca-a55.b-cdn.net/feb8139c-25fd-4bbd-a37c-9193c643718c/playlist.m3u8

Gumlet video examples

https://video.gumlet.io/6a5572bb562c566e44f60349/6a5574c7562c566e44f61ff7/download.mp4

https://video.gumlet.io/6a5572bb562c566e44f60349/6a5574c7562c566e44f61ff7/main.m3u8

Local (Media Library) example

your_video.mp4

Video hosted on Dropbox, Google Drive or MEGA

• We don’t advise doing that.

Video icon

• The background color and transparency of the Play icon are both fully adjustable.
• The maximum width of the video popup is adjustable. Default: 720px.
• Works with dynamic data, direct URLs , oEmbed code and media files.

Accessibility

• There is a special accessibility field to describe the function of the video.
• By default, it shows the post’s title. You can add any text.
• Using the accessibility field is good for your visitors, for SEO, and is used for the title of the video schema.

Video Schema

• Video Schema helps search engines understand what your video is about en improves your chances of decent indexing.

Type

• VideoObject.
• Automatic.

Name (title)

• Text as in the accessibility field.
• If empty the post title.
• If the post title is missing (ID only) it uses a fallback value ‘Video’.

Schema description

• VideoObject description for this block only.
• When empty, it uses the post excerpt, then the accessibility text, then the post title as a last fallback.
• For pages with multiple videos, use Schema description per block so each video gets its unique text instead of sharing the post excerpt.

Check Video-schema

• Check your video schema output: open the page, select ‘Page-source,’ and search for ‘application/ld+json’. It will mark all JSON schema output in your page code.
• If you prefer to use the excerpt as the video schema description, leave the description field empty and make sure there is an excerpt.
• Note: by default pages don’t have an excerpt. Some themes offer this as an option. There are several plugins or simple PHP snippets that activate this functionality on your website.

Cache

• We test the plugin with multiple cache plugins, like FlyingPress, LiteSpeed and WPCompress.
• Excluding the page from the cache was not necessary.
• CSS compression did not lead to issues with the tested plugins.
• Excluding JS scripts was not necessary.

If you have issues with a cache plugin, like WPCompress for example (that’s one of the most difficult cache plugins):

• Lazy Load → exclusions → add dvb-video-file
• Delay JS → exclusions → add dynamic-video-block

Known limitations

• We test our plugins with multiple themes and plugins.
• The Dynamic Video Player plugin can have issues with the Extendable theme.

Installation

• Upload the ‘Dynamic Video Player block plugin’
• If done manually upload plugin to /wp-content/plugins/
• Activate the plugin through the Plugins menu in WordPress.
• Add the Dynamic Video Player block to a page.
• Set the source for the video and for the video-poster (or fetch and set it if the source is YouTube, Vimeo, Gumlet or Bunny)
• Set a maximum width for the popup or leave the default of 720.
• Choose auto-play or not (the opening of the popup remains manual).