The code below will put the Amazon S3 video you link to in the basic HTML5 video player. Just replace “PATH-TO-VIDEO” with the video URL.
If you want to have a custom still image at the beginning of the video use the “poster” attribute. Replace “PATH-TO-STILL-IMAGE” with the URL of the image.
By default, the HTML5 player allows people to download the video. To remove that functionality I’ve added the controlsList=”nodownload” parameter. If you want to allow downloading of the video simply remove that parameter.
<video poster="PATH-TO-STILL-IMAGE" controls="controls" controlsList=”nodownload” width="640" height="360">
<source src="PATH-TO-VIDEO" type="video/mp4"></video>Allow Autoplay
To have the video autoplay you’ll need to add autoplay to the video tag as in the example below.
<video poster="PATH-TO-STILL-IMAGE" autoplay="autoplay" controls="controls" width="640" height="360">
<source src="PATH-TO-VIDEO" type="video/mp4"></video>
19 thoughts on “Amazon S3 Video Embed Code”
Thank you so much for the video you did on embedding videos into Amazon S3. I followed your example and embedded a video into my site. I think that I will change the overlay tomorrow since my picture is a bit narrow. I like the fact the branding for Amazon S3 is not including in the video. I tried Vimeo’s free account and, the video not only appeared with the branding, it also had my picture which excluded my niece’s picture who also appears on the page.
Hi Helena,
Inside of the video settings for every Vimeo video there is an “Embed” section where you can select what is included when the video is embedded. That may not be available in the free Vimeo account though.
I am now just seeing your response. There isn’t much flexibility with the free Vimeo account. I really like what you have taught me. It is very valuable information.
Thank you for this info. I stopped using Amazon S3 because I did not know how to use this embed code, Now I know. The other thing I struggle with that you might help is how to get a video from Amazon S3 as a featured video using WooCommerce Product.
Thank you so much, It is helpful
You’re welcome Ly, thanks for stopping by to check it out!
thank you for your valuable info… I am looking everywhere for S3 video embed protection, and actually I read at this article. Bravo
I’m glad I could help Joe, thanks for hanging out!
Very cool. I’m a noob, but is there a way to have the names of the videos saved as json in a config file or similar? So that I can update the videos hosted on my static site programmaticaly with Lambda.
Hey Ben,
Judging by the jargon your using I don’t think you’re a noob. I’m not sure how you would go about building what you need, I don’t have any experience with that. Sorry!
Thank you very much for sharing this code, but I keep getting no play button, showing as if something is broken…please how do I fix this? I have checked the code several times
This code doesn’t seem to be working anymore. All my previously embedded videos are broken now. Any update to the code?
Hi Mildred,
I just tested it and it works for me. Are there in errors being shown in the Chrome or Firefox inspector console?
So we are trying to use S3 to host our video on our Drupal site. The file is too large for Vimeo’s free option and we are too cheap to pay for the upgraded service. I’ve been reading all day about how to upload video and from AWS but I’m not seeing what I need. Most articles show you how to create a bucket, upload, then grab the URL to paste on a WordPress blog or something similar.
We are not wanting this video to be playing on background of our homepage see we need to find the code to customize the video players height and width. Can someone help walk me though this
Hi Mr Legend,
I’m not entirely clear where you want the video to be played. The first sentence of your last paragraph says where you don’t want the video to be played, but not where you do want it. Knowing where you want it helps with the code.
Is there any way to make the embed code responsive so that it fits to the screen resolution rather than being constricted to a particular aspect ratio?
Thanks!
Hi Alex,
Yes, that’s possible. The best practice is by defining the height and the width using CSS and not in the video player HTML tag. Then you use media queries to change the height and width depending on the size of the visitor’s screen. One of the best resources for media queries is this one by Chris Coyier: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I hope that helps and thanks for stopping by!
Hey Bjorn,
Just bring to your attention that 2 videos in this post are broken, there is a placeholder with no player controls and no video. Also, the embed code is nowhere in this post.
Cheers,
Julian
Hey Bjorn,
Apparently, https://wplearninglab.com is being blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Which is blocking video hosted on Amazon S3 and a bunch of other problems!
Cheers,
Julian