If its possible to add only play button to video/media

[olivela]

Hey everyone!
Thanks for checking out this problem.

I have one query is, if its possible to add only play button to video/media ?

Your help will be greatly appreciated. Thank you for your time.

[sarah]

Hi @olivela, great question! This isn’t something that comes out-of-the-box with our video block, but is easy to make in the editor with a little custom code.

Step 1: Drag a box block from the insert tab over a video element so that it is nested inside the video in the layers tab. If you see the video shrink in size, you can undo this by selecting the “Edit” button on the video block, “Show Advanced”, and toggling the Fit content setting.

Step 2: Add a “play” image inside the box. Set the width and height of the box to 100%, and set the justify-content and align-content to center.

Step 3: Select either the image or box layer depending on your preference, and add an element binding in the data tab that hides the element if state.playing.

Add an on-click event with a custom code action and a toggle state action. Here is an example of the custom code you could use if you just wanted to play the video:

const vid = document.querySelector('video');
vid.play()

For the toggle state option, you can toggle “playing”.

[JuliusGD]

Update to workflow. There was a missing step.

State must be assigned a value for the dropdown to populate with “Playing” in the Edit Actions step.

e.g. state.playing = false added to