Question

Is it possible to embed a video from DigitalOcean Spaces?

Posted on August 6, 2023
CDN DigitalOcean App Platform DigitalOcean Spaces
Asked by itsRemco

In youtube it’s possible to get an <iframe> embed for a video. I would like to embed one of my videos from DigitalOcean Spaces in my website.

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

Bobby Iliev

Site Moderator

• August 8, 2023

Hi there,

Yes, it should be possible to embed a video from DigitalOcean Spaces into your website using the <video> HTML tag rather than as you would with a YouTube video with an <iframe> tag.

The DigitalOcean Spaces is an object storage service, and you can generate URLs for your files that are accessible over the web.

Here’s a general guide on how you might accomplish this:

Make Sure the Video is Public: Ensure that the video file you want to embed is set to be publicly accessible. You can configure this through the DigitalOcean Spaces dashboard or through their API.
Get the URL of the Video: Once the video is public, you will have a URL that directly points to that video file.
Use HTML5 Video Tag: Instead of an <iframe>, you would typically use the <video> tag to embed a video from a direct URL. Here’s an example:

<video width="640" height="360" controls>
    <source src="https://your-space-name.nyc3.digitaloceanspaces.com/your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Replace the src attribute with the direct URL to your video in DigitalOcean Spaces.

Depending on the configuration of your DigitalOcean Spaces and the website where you’re embedding the video, you might need to consider CORS policies. You may need to adjust the settings in DigitalOcean Spaces to allow access from your website’s domain:

https://docs.digitalocean.com/products/spaces/how-to/configure-cors/

As a follow up, you can further customize the video player by using JavaScript libraries like Video.js or Plyr to provide a more interactive and styled video player.

Hope that this helps!

Best,

Bobby