Hi there,
I have build a custom video header Gutenberg block using the acf_register_block_type syntax and it’s working nicely!
One of the fields in this block is a video_file upload and I’m using this field to display an (inline & autoplay) video in my blade view:
@if ($video_file->url)
<figure class="{{ $block->classes }}__video">
<video class="{{ $block->classes }}__source" width="{!! $video_file->width !!}" height="{!! $video_file->height !!}" playsinline autoplay muted loop>
<source src="{!! $video_file->url !!}" type="video/mp4">
<p>{!! __('Your browser does not support this video', 'textdomain') !!}</p>
</video>
<x-video-controls progress/>
</figure>
@endif
On my frontend this is working great! However, in the Gutenberg editor, in the Acf preview mode, I see that these video attributes are stripped out: playsinline autoplay muted loop. If I manually add these in the DOM, the video works.
How can I avoid these tags from being stripped out?
Thanks!
Hey @twansparant!
This was a fun one to look into!
Turns out, React’s behaviour for tags like that will be false, so because you’re using JSX parsing for the block, it’s reading it as “false” and not showing it at all.
If you set them all to “playsinline=’true'” they will work correctly, apart from “muted”, which never appears in the DOM – but this appears to be a known issue with React, and the while the video will actually be muted, it won’t appear in the DOM: https://stackoverflow.com/questions/61510160/why-muted-attribute-on-video-tag-is-ignored-in-react
Hope this helps!
Thanks @lgladdy!
I will try this asap, sounds logical 🙂
Yep, that did the trick!
Thanks!
