See https://forum.laravel-livewire.com/t/problem-with-livewire-in-an-iframe/769
But it's an older post, may be outdated.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I want to implement the following functionality: The user enters a URL from an external platform (e.g., YouTube) into a text field. On the blur event, I want to load the corresponding video inside an iframe.
My form was built using a Filament resource. I thought about creating a custom field to handle the logic for dynamically loading the video based on the platform. custom field blade file:
<div>
<input
type="text"
wire:model.lazy="{{ $getStatePath() }}"
id="{{ $getId() }}"
{{-- @blur="Livewire.emit('videoUrlBlurred', '{{ $getStatePath() }}')" --}}
placeholder="Enter video URL"
>
{{ $getState() }} {{ $getStatePath() }}
<script>
window.addEventListener('load', function () {
console.log('loaded');
const input = document.getElementById('{{ $getId() }}');
console.log(input);
if (input) {
input.addEventListener('blur', () => {
Livewire.emit('videoUrlBlurred', { url: input.value });
});
}
});
</script>
Edit Page of the resource:
namespace App\Filament\Resources\MediaResource\Pages;
use App\Filament\Resources\MediaResource;
use Filament\Actions;
use Filament\Resources\Pages\EditRecord;
class EditMedia extends EditRecord
{
protected static string $resource = MediaResource::class;
protected $listeners = ['videoUrlBlurred'];
public function videoUrlBlurred($statePath)
{
$field = $this->form->getComponent($statePath);
if ($field && method_exists($field, 'fetchVideo')) {
$field->fetchVideo();
}
}
protected function getHeaderActions(): array
{
return [
Actions\DeleteAction::make(),
];
}
}
However, no matter how I trigger the videoUrlBlurred event, I always get the following error:
Uncaught TypeError: Livewire.emit is not a function
I haven't been able to figure out how to fix this issue. Is Liverwire included by default in Filament, or do I need to configure something manually?
Please or to participate in this conversation.