robole/sulu-video-bundle

Preview, extract and embed videos in Sulu CMS

v1.0.0 2025-01-16 08:58 UTC

Requires

• php: ^8.2
• jackalope/jackalope-doctrine-dbal: *
• sulu/sulu: ^2.5
• symfony/config: ^6.0 | ^7.0
• symfony/dependency-injection: ^6.0 | ^7.0
• symfony/framework-bundle: ^6.0 | ^7.0

Requires (Dev)

• friendsofphp/php-cs-fixer: ^3.66
• phpunit/phpunit: ^11.5

MIT

• FlxRobole

README

SuluVideoBundle

Sulu CMS bundle to preview and extract embed URLs from Youtube, Vimeo, Dailymotion and HTML5 videos.

This bundle adds a new content type video and provides the Twig functions video_provider and video_embed_url to embed external videos in an iframe or video element.

Installation

This bundle requires PHP 8.2 or later and Node 18 (or Node 14 for Sulu versions <2.6.0) for building the Sulu administration UI.

1. Open a command console, enter your project directory and run:

composer require robole/sulu-video-bundle

If you're not using Symfony Flex, you'll also need to add the bundle in your config/bundles.php file:

return [
    //...
    Robole\SuluVideoBundle\SuluVideoBundle::class => ['all' => true],
];

1. Link the frontend code by adding the following to your assets/admin/package.json:

"dependencies": {
    "sulu-video-bundle": "file:../../vendor/robole/sulu-video-bundle/src/Resources/js"
}

1. Import the frontend code by adding the following to your assets/admin/app.js:

import "sulu-video-bundle";

1. Install all npm dependencies and build the admin UI (see all options):

cd assets/admin
npm install
npm run build

Usage

1. Add the video content type to any of your page templates:

<property name="my_video" type="video" mandatory="true">
    <meta>
        <title lang="de">Video</title>
        <title lang="en">Video</title>
    </meta>
</property>

1. Render the embeddable link in your twig templates:

{% if content['my_video'] %}
    {% if video_provider(content['my_video']) %}
        <!-- YouTube, Vimeo or Dailymotion -->
        <iframe
            src="{{ video_embed_url(content['my_video']) }}"
            frameborder="0"
            allow="fullscreen"
        ></iframe>
    {% else %}
        <!-- HTML5 video -->
        <video
            controls
            src="{{ video_embed_url(content['my_video']) }}"
        ></video>
    {% endif %}
{% endif %}

Background

This small bundle serves as a reference for our blog series "Sulu Bundle Development" showcasing major steps to build a Sulu bundle from scratch. The underlying idea was inspired by the Statamic Video Fieldtype.

Scripts

• To test the PHP code, run:

  composer phpunit

• To check the coding standards, run:

  composer php-cs

• To apply coding standards, run:

  composer php-cs-fix