Vital Video Block

説明

Vital Video is a WordPress block plugin designed to improve Core Web Vitals performance when displaying YouTube videos.

Instead of traditional embedding, it provides a lightweight, performance-optimized solution that first loads a clickable video thumbnail.

The Vital Video Block doesn’t play videos in the WordPress editor. It’s designed to prioritize performance and user experience on your frontend. To test video behavior, simply preview your post or page.

Features

  • Performance-first YouTube video display.
  • Automatic video thumbnail and title retrieval.
  • WebP image support for faster image loading.
  • Customizable aspect ratios (4:3 and 16:9).
  • Displays the video title in the image.
  • Multiple thumbnail quality options.
  • Minimal initial page load impact.
  • Option to disable WebP images if unavailable.
  • Advanced video playback controls.
  • Uses YouTube’s no-cookie thumbnail service.
  • Respects modern browser autoplay policies.
  • Alt text matches the video title.
  • Thumbnail dimensions set based on selected image size:
    • HQ (480×320): Default size
    • SD (640×480): Standard size
    • MAX (1280×720): Highest available resolution

Vital Video Settings

  • Aspect Ratio: Choose between 16:9 and 4:3.
  • Mute Toggle: Control video playback behavior.
  • Thumbnail Quality: Select from High, Standard, or Maximum resolution.
  • Disable WebP: Turn off WebP usage if unavailable.

Mute Toggle

The Mute Toggle feature is designed primarily for mobile devices, adhering to browser autoplay policies.

Mute Toggle Off (Sound On):

Videos require two clicks to start playing:

  1. The first click loads the video.
  2. The second click begins playback. Ideal for maintaining user control and preventing unexpected audio.

Mute Toggle On (Sound Off):

  • Videos play with a single click.
  • Automatically starts muted.
  • Perfect for situations where immediate video playback is desired.
  • Complies with browser autoplay restrictions.

Disable WebP Images

  • WebP is enabled by default. Most thumbnails will use the WebP format.
  • However, if you encounter a dummy placeholder image, try selecting a different thumbnail size to see if another WebP version exists.
  • If no WebP images are available, you can enable the “Disable WebP Images” option as a last resort. This – will use fallback formats like JPG instead.

Only use “Disable WebP Images” when absolutely necessary!

External Services

This plugin connects to YouTube’s services to embed videos and retrieve video information:

YouTube Video Service:

  • The plugin connects to YouTube’s embed service (youtube-nocookie.com) to display videos
  • When a video is played, it loads the video player from YouTube’s servers
  • YouTube’s terms of service: https://www.youtube.com/static?template=terms
  • YouTube’s privacy policy: https://policies.google.com/privacy

YouTube oEmbed API:

  • Used to fetch video titles when adding videos to your content
  • Sends the YouTube video ID to retrieve the video title
  • API documentation: https://developers.google.com/youtube/v3/docs/videos

YouTube Thumbnail Service:

  • Retrieves video thumbnail images from i.ytimg.com
  • Only loads thumbnails for videos you’ve embedded
  • No personal data is sent to this service

Note: This plugin uses YouTube’s privacy-enhanced mode by default, which helps protect your visitors’ privacy by not setting cookies until the video is played.

Contributing

Contributions are welcome! You can support Vital Video in various ways:

スクリーンショット

  • A screenshot showing the block in the editor, with available settings in the sidebar.
  • A frontend preview of the video thumbnail with the play button.

ブロック

このプラグインは1個のブロックを提供します。

  • Vital Video The most effective way to load YouTube videos and improve Core Web Vitals. Don't let YouTube slow down your page.

インストール

You can install Vital Video in two ways:

Usage

  1. Activating the plugin
  2. Add a new block to your post or page.
  3. Select the “Vital Video” block.
  4. Paste a YouTube video URL.
  5. Customize Vital Video settings in the block inspector.

FAQ

What is the Mute Toggle?

The Mute Toggle gives you control over video playback:
Mute Toggle Off: Videos require two clicks to play and start with sound.
Mute Toggle On: Videos play immediately but are muted by default.

Why would I disable WebP images?

  • WebP is faster, but YouTube doesn’t always provide WebP thumbnails.
  • If you see a dummy placeholder image, try different thumbnail sizes first.
  • If none work, enable “Disable WebP Images” to fall back on JPG or other formats.

Can I change the position of the title?

  • Yes, you can overwrite the CSS.
  • Use the selector .wp-block-greuts-vital-video .vital-video .video-title {}
    and the property: place-self: with the values start, end or center;
  • examples
    place-self: end; = bottom/right
    place-self: start center; = top/center
  • Here you can also edit the text and background of the title.

評価

このプラグインにはレビューがありません。

貢献者と開発者

Vital Video Block はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Vital Video Block” は3ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“Vital Video Block” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.0.3

Fixed Style – 03 januari 2025

1.0.2

Release Date – 02 januari 2025

  • Changing sreenshots

1.0.1

Release Date – 01 januari 2025

  • Updated readme.txt to match the standards

1.0.0

*Initial Release