Youtube Field Laravel Package

Getting Started

This is a tiny, single-author Nova field package (last tagged April 2023, zero dependents) whose job is to let an editor paste a YouTube reference on a Nova form and preview the video. Because it is a Nova field, it only makes sense inside a Laravel app that already has laravel/nova installed and a working app/Nova directory.

1. Install via Composer inside the host Laravel app:

   composer require m-a-k-o/youtube-field
   

2. Confirm the service provider is auto-discovered (Laravel 8+ package discovery). If not, register Mako\YouTubeField\YouTubeFieldServiceProvider (or whatever the README names) in config/app.php.
3. Publish any Nova assets if the README instructs it — Nova fields that ship a compiled component require php artisan vendor:publish --tag=nova-assets style steps, and forgetting this is the #1 reason the field renders blank.
4. Open app/Nova/Article.php (or whichever resource should carry a video) and add the field:

   use Mako\YouTubeField\YouTube; // verify exact FQCN from README
   
   public function fields(NovaRequest $request)
   {
       return [
           YouTube::make('Video', 'video_url')
               ->rules('nullable', 'url'),
       ];
   }
   

5. Visit the resource form, paste a URL like https://www.youtube.com/watch?v=dQw4w9WgXcQ, save, and confirm the column value and any inline preview.

First use case to validate: attach one YouTube video to an "Article" or "Product" model, display the thumbnail in the Nova index, and render the embed on the public Blade view. If that loop works end-to-end you have exercised the package's real value — everything else is cosmetic.

Before writing any code, read the GitHub README end to end and open src/ — with zero dependents and a small codebase you should be able to read the entire field class in a few minutes. That tells you more than any docs.

Implementation Patterns

Store the ID, not the URL (or normalize on save). The most common pattern for a YouTube field is to accept a full URL in the form but persist only the 11-character video ID. If this package stores the raw URL, add a mutator/accessor on the model so the rest of your app has a clean contract:

public function setVideoUrlAttribute($value): void
{
    $this->attributes['video_id'] = YouTubeUrlParser::id($value); // your helper
}

A regex that covers watch?v=, youtu.be/, /embed/, /shorts/, and ?t= timestamps is worth writing once rather than trusting the field.

Context-aware placement. Typical field package behavior is to render differently on index, detail, and form. Lean into it:

• Form: paste/validate the URL.
• Index: show a thumbnail so editors can scan a list at a glance.
• Detail: show the embedded player or a larger preview.

Use ->hideFromIndex() / ->onlyOnForms() if the field's index rendering is heavy or ugly.

Pair with a plain text field during rollout. Because the package is unmaintained, keep a video_url string column alongside it for the first sprint. If the field breaks on a Nova upgrade you can swap the component out without a data migration.

Render on the frontend yourself. Don't depend on the package for public-site output — it's a Nova field, not a Blade component. Build a small partial:

@if ($article->video_id)
  <iframe
    src="https://www.youtube-nocookie.com/embed/{{ $article->video_id }}"
    title="Video" loading="lazy" allowfullscreen
    style="aspect-ratio:16/9;width:100%"></iframe>
@endif

Use youtube-nocookie.com for privacy/GDPR reasons — a detail the field's preview won't handle for you.

Validation lives in your resource, not the package. Always attach ->rules('nullable', 'url') (or a custom rule that checks the host is a YouTube domain). Nova fields rarely enforce domain specificity.

Multi-video / gallery pattern. If a model needs several videos, store a JSON array and either loop the field or write a thin custom wrapper. Don't expect the package to handle arrays natively.

Localization / labels. Use ->name(__('Video')) and ->help('Paste a YouTube link') to keep the editor UX clear; the package won't have translations.

Gotchas and Tips

• Nova version compatibility is the biggest risk. Last release April 2023 means it was built against Nova 4.x. If you are on Nova 5, test the form component in a staging branch before merging. A silent JS failure (blank field, no error) is the usual symptom — check the browser console and storage/logs/laravel.log.
• Zero dependents / zero stars = no community safety net. Read the source rather than relying on the README. Verify: the class namespace, the Vue component registration, and whether it requires a published config. There is nobody to file issues with in practice.
• URL parsing edge cases. You'll hit youtu.be/ID?si=..., youtube.com/shorts/ID, embed URLs, and links with &t=1m30s. If the package's parser is naive (many are), strip the query string yourself before saving or you'll store dQw4w9WgXcQ&t=90 and produce a broken embed.
• Asset publishing. Nova fields with compiled JS need php artisan nova:publish (or vendor:publish) after install and after every composer update. Add it to your deploy script; forgetting it produces an empty input.
• The preview may make network calls to YouTube. In air-gapped or strict-CSP environments the thumbnail iframe will be blocked. Allow img.youtube.com, i.ytimg.com, and www.youtube.com in your Content-Security-Policy, or disable the preview.
• Don't trust it as a validator. A URL can pass the field's client-side check and still be a deleted/private video. If your app needs to know the video is alive, add a queued job that hits the YouTube Data API and stores a status column.
• Extension points. If you need to change behavior, subclass the field (class MyYouTube extends YouTube) and override the model serialization / component props rather than editing vendor/. That keeps composer update safe and gives you a migration path if the package is abandoned.
• Debugging checklist when the field misbehaves: (1) composer show m-a-k-o/youtube-field to confirm the installed version; (2) php artisan nova:asset / rebuild Nova assets; (3) inspect the field's JSON in the form request via $request->all(); (4) check nova-components compiled output in public/vendor; (5) verify the model's $fillable includes the column — a silently-dropped save is a very common "the field is broken" false alarm.
• Exit strategy. Given low maintenance signals, isolate usage to one resource and keep the persisted column a plain varchar/string so you can replace the field with a standard Text::make('video_url') plus a custom Vue component in an afternoon if needed.