Disable download on embedded video Dawn theme

Izzy_art
Visitor
1 0 0

I embedded a video on a custom block using this code:

 

<style>

video {

display: block;
margin: 0 auto;
width: 100%;
height: 50%;

 }

 </style>

 
<video controls autoplay muted playsinline >
<source src="video URL">
</video>

 

I'd like to keep the controls so that people can play/pause and turn volume up, but would like to remove the three dots and download option.

 

Screenshot 2024-04-05 at 10.05.50.pngScreenshot 2024-04-05 at 10.15.53.png

 

Any ideas? Thank you!

 

Reply 1 (1)

MaxDesign
Shopify Expert
213 15 83

You can try something like that to start with:

 

 

<video controls autoplay muted playsinline disablePictureInPicture controlsList="nodownload nofullscreen noplaybackrate noremoteplayback">
<source src="video URL">
</video>

 

but still Firefox and Safari might do their own thing, especially Safari which is known to be couple years late to implement features.

 

If you want to have full control over the player, then you need to remove the control attribute, and add your own controls with html, css and javascript. This method requires a good level of javascript especially, as video can be a pain to deal with and playback errors must be handled properly.

Reach out to me at admin@maxdesign.expert