manifest / media / nsz-design-video-field

970 Design Video Field

A WordPress plugin to create an ACF Field for Cloudflare Video Stream

by 970Design · github.com/970design/nsz-design-video-field

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/970design/nsz-design-video-field/archive/refs/heads/master.zip

Updates itself. It ships its own updater (Plugin Update Checker), so new versions appear under Dashboard → Updates.

Readme github.com/970design/nsz-design-video-field ↗

An Advanced Custom Fields (ACF) Field for Cloudflare Stream that allows you to upload videos to Cloudflare Stream and embed them on your site.

Requirements

WordPress 6.4+
PHP 8.3+
Advanced Custom Fields (ACF)
Cloudflare Stream subscription

Installation

Install plugin from WordPress directory
Activate the plugin through the 'Plugins' menu in WordPress
Add your Cloudflare credentials to the settings page
Use the new Cloudflare Stream field like any other ACF field

Features

Upload videos directly to Cloudflare Stream
Get HLS and Dash manifests for streaming
Generate thumbnails and preview URLs
Configure basic video options (loop, autoplay, mute, controls)
Integration with ACF fields

Returned Data

The ACF field will return an array with the following data for you to use on your website frontend:

Array
(
    [filename] => 'uploaded-video.mp4'
    [hls] => 'https://videodelivery.net/video-id/hls/playlist.m3u8'
    [dash] => 'https://videodelivery.net/video-id/dash/playlist.mpd'
    [thumbnail] => 'https://videodelivery.net/unique-video-uid/thumbnails/thumbnail.jpg'
    [preview] => 'https://watch.videodelivery.net/video-id'
    [muted] => '1'
    [autoplay] => '1'
    [loop] => '0'
    [controls] => '0'
)

Vue Integration

If you're using Vue.js in your project, you can use our companion component to render the data provided by this field: @970design/vue-video-stream

Gotchas

If You are getting the error "Error fetching videos from Cloudflare" or "Failed connecting to Cloudflare stream" - and you see in the console it's a CORS error - it's likely that your Cloudflare credentials are incorrect, your API credentials' permissions are incorrect, or you do not have Cloudflare Stream enabled on your account. Double-check your credentials & permissions and ensure you have Stream enabled and enough space in your account.

Security

Your Cloudflare credentials are encrypted and only saved locally on your WordPress installation, and are not transferred or shared with any external services.

Stable Encryption Key (optional)

By default the AES-256 encryption key is derived from the WordPress salts (AUTH_SALT / SECURE_AUTH_SALT), which differ per environment — so encrypted credentials cannot be decrypted after a database transfer between environments.

To make encrypted values portable, define NSZ_ENCRYPTION_SALT with the same value in every environment (e.g. in Bedrock's config/application.php):

Config::define('NSZ_ENCRYPTION_SALT', env('NSZ_ENCRYPTION_SALT') ?: '');

Opting in is non-destructive: values encrypted before the constant was set still decrypt via the WordPress-salt fallback. A value only becomes transfer-proof once it has been re-saved (re-encrypted under the shared salt) after the constant is in place.

License

GPLv2 or later - http://www.gnu.org/licenses/gpl-2.0.html

Credits

The development of this package is sponsored by 970 Design, a creative agency based in Vail, Colorado. If you need help with your headless WordPress project, please don't hesitate to reach out.