S3 Amazon: How to embed video in your site

You want to embed video or audio from S3 Amazon into your site? This article tells you how to deal with the code involved to get your videos and audios up and running. You can use this code in practically any cms or regular website. Now, for content management systems like Joomla, WordPress or Drupal, there are plugins that take care of the code for you, but for all systems and sites that are not mainstream, you need to write the stuff yourself.
However, without an embedded video player, you cannot just play any type of media. Like FLV needs a Flash player in order to work, so you have to stick to traditional formats, like SWF, WMV, MOV, AVI, MP3, MP4 where MOV(QuickTime) , MP3(Audio) and SWF(Flash) are the safest bet because not everyone has the appropriate plugins on board to play the other formats.

Don’t panic! You only need to look at a couple of things

Below is the raw code of a video called myvideo.flv with a width of 500pixels by 305 pixels. Doesn’t look encouraging and that is how it is supposed to be 🙂 Just kidding, it’s a lot easier then it appears to be:

A real mess, huh? But in the code snippet below you will see what is important to you. All the rest is just copy and paste. So, if you now select and copy the code above (CTRL+C for PC – Command+C for Mac) and paste that in a text editor where you can add color to the text, for instance WordPad(Windows) or Text editor(Mac), and safe that file as embedding-code.rtf or embed-code.doc, then half of the work is already done. Now, let’s look at the red parts in the following code:

The red part is all you need to change. In your text file, color those parts in red as well and save again. Now you have a snippet of code you can re-use again and again with a clear indication what is important to change.

Next thing, save a copy of that file and now we are going to change those parts one by one.width=”500” means the video player is 500 pixels wide, therefore the player will display exactly 500pixels wide. If your video is 720pixels wide and 380 pixels high, you change it like this:

You need to repeat that in the last line as well. Reason is that some browser ignore the <object>-method and others ignore the <embed>-method. By placing them both in the code, you assure that most people can view or listen to your media. Let’s look at that code again:

What now? To embed video, we need to know where it comes from. That is, we have to give the exact location and name of the file. If it is a file on your own web space, you can get away with a relative path to the movie, like I show here:
<param name=”movie” value=”myfolder/myvideo.mov” />Although this can work out fine, it won’t do in our case because we need the S3 Amazon link to the file. Luckily, your S3 application, be it CloudBerry Explorer, Cyberduck, S3 Firefox Organizer, Transmit, S3 Browser,… they all give you the option to click on the link in your bucket and get the url. The way to do that differs per application, though. It would lead too far to cover them all, so I’m going to focus on 4 of them:

Getting the url of your media in S3 Amazon

There are several options for the urls and you can use any type in your embedding code (including CNAME types), but make sure the appropriate permissions are set. Permissions for expiring urls must be set to Private, while for normal links you can set it to Public. In most applications, permissions are default set to Private. I’m not going to delve deeper into this, because the video tutorials in previous articles already covered that part:

S3 Browser: Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Generate Web urls. There are several options for the urls and I urge you to experiment with each setting. Copy the url.

CloudBerry Explorer:Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Web Url. Same thing here, various options, including CNAME (to mask the s3.amazonaws.com url and replace it with a subdomain read further below). Leave the CNAME field alone unless it is setup for you.

Firefox S3 Organizer:Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Copy URL to clipboard. While in the same menu, Get Presigned Urls means to get a link with an expiry date/time.

Transmit:Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Copy Path. The path is automatically copied. You have no options to change the type of url.

Select the part in that says myfolder/myvideo.mov and paste the copied url over it with CTRL+V or Command+V(Mac). Repeat that in the line with the <embed>-tag. Your code should now look something like this:

If you now copy and paste that code into your html page or in the html mode of your cms editor, you should get a video, if all is well. If the video doesn’t show, the permission is probably not set as it should. Go back into your app. and check the permissions for that particular file.

Tweaking the behavior of the movie

Depending on the type of video, you can set additional parameters(attributes). Extra parameters need to be placed in the <object> and <embed> tag. Look at the code above again and notice that in the <object> tag there is this code:
<param name=”quality” value=”high” /> while in the <embed> tag you have quality=”high”As you can see, both have quality as an attribute but it is written differently. It is not difficult to get this right once you have done it a couple of times.
OK, we now can add the following attribute: autoplay, like this:

There are quite few extra parameters and quite a few are default true, meaning, they are enabled. For instance, the attrubute controller is default set to true, so if you do not want to show the play button and progress bar, you could set: <param name=”controller” value=”false” /> and for embedding: controller=”false“.
With QuickTime movies you can even set the end time of the movie, like: endtime=”3:30:22.5″.However, you have to realize that many parameters depend on the type of media file. What is good for QuickTime is often no good for SWF or WMV. Therefore, it is always a good idea to google the terms “embed parameters + file type” to find a list of these attributes. For instance, here is the list for QuickTime.

When you have an understanding how embedding works, it becomes easier to understand how video player plugins operate and, in its turn, makes it easier to work with them. Most plugins are quite easy to handle but some have advanced features, and those are discussed in the next article! But before we close off here, I want to explain something about masking the url:

Masking the S3 Amazon URL

The urls from S3 Amazon(sometimes called S3 AWS), are long and rather ugly. There is a way to mask this, either to make it look nicer or to brand your own domain by using the CNAME url. This is how it works:

You create bucket which we now call for experimen’ts sake support.raboo.com. Yes, buckets can have dots in them.

And we upload a file called myvideo.mov.

The resulting url will be: http://support.raboo.com.s3.amazonaws.com/myvideo.mov

On your web server, do it yourself or ask the host provider to create a subdomain for you. In this case support. If your main domain would be raboo.com, this would be how you get there: http://support.raboo.com

Once you have that subdomain and the bucket, you can use it as a mask, thus http://support.raboo.com.s3.amazonaws.com/myvideo.mov can be referenced to as http://support.raboo.com/myvideo.mov

The advantage is that nobody knows where the video or audio really comes from and secondly, it looks better. Although during the download, you might see some activity in the statusbar below that indicated S3 is involved in this, so as a reason to hide that you use S3 Amazon this method is a bit pointless. You can see this activity very good when you load a Vimeo movie for instance. Pay attention to what happens in the status bar (below in your browser)

Good question, Paul. You need a Flash player in order for that to work. The videos have to be FLV, MP4 or MOV. Regular embedding like shown above will not work.
The most used and versatile player around (it has been used by YouTube as well) is JW Player 5 from http://www.longtailvideo.com/.
Players like that come with a range of settings which are comparable with embedding code, but have extra parameters. For the “filename” this becomes:

As long as you stick to mov, MP3 or swf, you do not need a player. You can indeed copy this code, adapt the red parts and put it in your blog in HTML mode.

However, this article is written for non-cms users. Since you work with WordPress, it might be easier to work with a plugin because you have more choices, like MP4 and FLV and almost guaranteed everyone can play your media.
If you don’t want to do that, and embed the code yourself, you need to enclose the embedding code with <code></code> tags or it won’t work in most cases. Again, a plugin will make life much easier, though. Here is a list of useful plugins: http://wordpress.org/extend/plugins/search.php?q=video&sort=
Hope this helps?

There is an error on the server when I click on the movie link in the source code. It is often a give-away for problems when you try to play such a link in your browser. This is the message I’ve got: The server encountered an internal error or misconfiguration and was unable to complete your request.
Did you create a CNAME for the bucket ptsvid? If so, replace the ptsvid.s3.amazonaws.com part with that CNAME.

I do not use EzS3 because I developed my own plugins for Joomla and WordPress which do basically the same as this application except that you pay a one time fee instead of a monthly fee of $20.
For other site types, I simply use JW player from Longtailvideo and add the embedding code myself.
Now, that is a personal approach. I have no objection against EzS3, so if you want to use it, go ahead, try it out for a month and perhaps let us know how it went.

Great stuff here, however, I want to embed a weekly radio program I host on Maui. I have the video embed thing down but need to accomplish separate embedding for the radio prog. I am using Drupal, programs are stored on Amazon S3 in Mpg4a format. So far, I have been successful –in bruising my forehead– as I bang it against the wall when attempting the embedding of the program. I would gladly pay for assistance, donate to a charity, sell you my wife for a night, lend you my Ferrari for a day, anything to get this to work. Anyway, thanks for any help, paid or otherwise.

No need to spend money, there is a simple answer to this: What you best do is to download a Drupal plugin that handles audio and video for you. Here is the URL: http://drupal.org/project/jwplayermodule.
It doesn’t say anything about audio, but I know for a fact that JW player supports audio, specifically M4a or Mpg4a as you call it. Just follow the installation instructions and how to use it and you will be fine.

An additional advantage of using a plugin is that you can set a poster image for every audio, which makes it more attractive. Here is an example of such an approach: http://www.womencorp.org/andrew-patricio-interview/ It orks with JW player too.
I hope this is helpful? Let me know if you need further assistance.

I am slogging through the myriad options for my radio program site using jwplayer. Have perused the many pages on Drupal and have found little that helps.
As is usually the case, I am missing the bits and pieces that allow me to post my programs stored on Amazon S3 and served through Amazon Cloud. Simply put, I want to create individual nodes (Drupal) with a simple audio player displayed.
I hate to burden others with my lack of knowledge and will gladly pay for guidance. The video embed you provide gets me -almost- there.
I’m really not sure which modules other then jwplayer should be used, nor am i sure of the exact – syntax. Almost everything on this subject is tilted toward video and the differences, though subtle i’m sure, are not apparent. Usually, I over-think these issues and suspect this is the case.

Hi Ron,
I have no experience with Drupal myself. I have installed a test version to see how it works and will report back to you soon, probably tomorrow.

In the meantime, I need to know two things from you:
1. Is your bucket that contains the test audio set to a streaming distribution or is it just a download distribution?
2. Is the audio itself set to private (see ACL settings) or public?

Is there anyone who can help Ron out on Drupal? I really do not understand how it works and I have no time to study the manuals.
Let me know and I put the the two of you together.
Sorry about that , Ron. I’m fine with WordPress and Joomla, but Drupal is an enigma to me.

I certainly understand. After using Drupal for almost a year, I’ve found that each introduction of a new piece, effective audio presentation in this case, also introduces
I am reconsidering this content delivery platform as this is not what

CrossFTP does not create code for you, but you can use it do copy and paste the URLs to your video and put that in the embedding code.
In fact, you can use the code above in your html site and just replace the red parts.

With CrossFTP, you can upload files, create new buckets, change names etc…
It works more or less like cloudBerry S3 Explorer, a S3 app for Windows.

Yes, for MP4 you need a player, like JW player for instance (see recommended products).
But that requires another type of code.
Or use HTML5 code but that is another story because it only works on a limited amount of browsers. I will write about that quite soon.

Hi Uwe,
No, your own server only carries the weight of the player itself, without the video of audio. Since that player is lightweight, it will have no consequence for the performance of your server. It is only 103Kb and it will be cached, so if you have 10 videos on your page, it does not add up.

Rudolf, I’ve been pouring through your fabulous site and others you’ve led me to via links for several days now. I’ve learned a lot.

I host a 2-hour, weekly streaming TV show on http://www.urfaceradio.com. UR Faceradio is an experimental effort by a radio station in Manila, Philippines. Each week I receive a copy of the show in either .mp4, .m4v or .f4v format. I plan to store only the most recent shows on S3. I will probably use CloudBerry to upload and manage the files.

I plan to make the most recent 4 shows available on my WP blog for on-demand streaming [no downloading]. With JW Player for WP, I plan to segment each 2-hour show into chapters.

QUESTION: Does it make sense to upload a 2-hour video via DSL connection? Or will the upload just take way too long. And is it really possible to stream the show to an audience of several hundred people without breaking my meager bank account? I’m having real trouble finding advice how to calculate these figures.

ANOTHER QUESTION: I’m searching for a WP Theme that will preserve all of the post content built up over the past 14 months, but will put my new video up top. The premium themes I’ve found give virtually no detail about the video player they use, and no one is responding for my request for info. And they are too expensive to buy just to try out. Any advice about how to track down the right theme for my needs?

THANKS AGAIN for all the info on your site. I feel like I’m taking a graduate crash course.

Sorry Tom, somehow I missed your question.
You can upload a two hour video if you use streaming via rtmp, no problem, but I tend to divide them in smaller chunks because 2 hours is very long to watch on the internet..
As for the cost: Assuming your video is about 500mb, that means that if 200 people watch this. the bandwidth use will be 100GB x2 because you will be using CloudFront. That makes it equal to 200GB.
200GB x $0.140 = $28.00 roughly. Now, this presumes they all play it until the end. If someone breaks off in the middle, the rest of the video is not charged.

I have no idea what theme to use to be honest. I use regular themes mostly. You can install JW player in the root of your domain (in a separate folder)and work from there.

The info here is fantastic – but how do I go about streaming my S3 videos (AVI and MP3, MP4) video content through my wordpress site without converting the files to some other format or purchasing some license (at this point. Just need to get the project up and running first and see that it works)?

I’ve tried numerous suggestions, and nothing is working. The best I’ve been able to do is display a videoscreen on my WP page but the video won’t play. The videos will download from S3 (which is not what I want as I want to protect the content) but I can’t get it to actually play.

If I can find the right way of getting it all going, it will simply be fantastic. I’ve been struggling with this for weeks.

However, there is a danger in using public videos as explained in this article: http://www.miracletutorials.com/s3-amazon-public-content-in-danger-of-being-hacked/
The ideal is to set all rich content to private and use expiring URLs, which you can generate with an application like CloudBerry S3 Explorer if you do not want to spend money at first. You could set the expiring to a month for instance.
I hope this is useful?

I got your info link from wix -that trying to help me add video into their web

But my biggest problem is that I am lost with the web attach of the world press
as much as I try to find solution to how to mange to embed files of my vide from the Amazon into to world press -without sharing my ID KEY inside of the dashboard of the web { I don’t want 400 people of the hosting to be able to get into my Amazon privet host of videos}

I don’t find a solution and I want to ask you and maybe at last to find a solution

1 I read this what you wrote that
any video of Amazon that I make public -any one can transfer it into another webs and I will pay for it -is that right if it is -it is very bed for me because my video are in full nude and I must keep them to be able to watch on my web only -I want to charge time watching

so I start to think maybe Amazon is not the place were I can keep my video at all if this is the case -or maybe you know way to protect others to share my video
And that I will be able to show it just on my site and ask for payment for time watching -if you know how to make such a protection I will be happy to know

And if there isn’t such a protection -I will not be able to continue host my video in Amazon -and I will have to know if you know another hosting that can support what I need
1 my video need to be seen just on my site
2 a way to share my videos on my site directly from the hosting without sharing with the host of the web -any privet key and password of my video hosting

Thank you ahead
I fell little bit after 3 month of tying to find solution that I am just not in the right direction at all

I need to change something may be the hosting of my web or the hosting of the video or both or something
Because I am not progressing to no were for 3 month I am trying to built this web and I get just endless problems in the way

can you as well check waht went wrong with this try we did to make the url work from amazon

but right know i am concern that i cant use amazon at all beacuse of what you wrote about the public ability to share it
and i am like all artist -run of money to pay for s3 media stream -as i see you recomand someone before me

is there any other way i can protect my video -can you give me any way the link to this s3 media steam -is it totly protecting my video from the public to not shre on other site

if any one will be able to share it i will lose my ability to earn money as i wanted from time watching -all this site meant to be about paying to see my video -and i need to keep it protected on my web only – and i dont have or want as well to pay for everytime someone share it in other webs – i am sure i will have to pay much if this is what will happend

right know i feel very much not proetcted with my video on amazon -even that i didnt publish them yet -i feel they are not protected there -i already make the -make publish -what make them not protected right ? how can i make sure there are protected inside amazon as well insie of my web

and i feel i want to ask you if you may know another site host that will not have all this problems the video are in nude i must protect them -this is my art

and this si the url that didnt work on the worldpress if you can look at it
many thanks ahead

Hi Norma, I did not find any code in the source code of the page that can trigger a video.
Perhaps I need to look at another page? If so, please leave a URL.

Regarding protection and S3Media Stream:
You could contact http://www.wp21century.com and ask to sponsor the software. Show a link to your best video and if accepted, you get the software free for one year.

Hi Thank you for coming back to me
yes i know i was so amazed with the fact i realize yesterday -that anybody can ambed my link and i will have to pay on it to amazon that i took all my videos from amazon -i left just one -there for i can not send it in here were any body can see it and share it in webs -if you can i will send it to you for check privet – and thank you for the other tip

maybe you can give me one more tip
i used to put my video in vimoe untill thyue had destroy all my 465 video in one minute. do you know maybe a nother way i can host a full nude video of mine in a web that will allow me to share url inisde of my worldpress web

i am runing after my tails for month with this -not ebing able to built my web

does you tub will support it -if all the video being shared just on my web and not on the you tub –

do you know other web that can give me the ability to do it -and then it will avoide all this problems i have with amazon

maybe thanks ahead -my email i add i can send you this link or url video of amason to check in privet

Hi Norma,
You have many video services, but you generally end up paying much more then Amazon. Also, since your video seems to contain nudes, it makes a lot of services nervous, including Vimeo. Amazon takes no stand on this, they do not care about the content of your videos, hence no risk of being shut down, unless you would spread racial hatred or that sort of thing, because then they are required by law to react. I’m sure that is not your case 😉
As to your problems with Amazon, we will remedy that in private.

Hi Sam,
If you link to a video residing on S3 or CloudFront, your server does not get taxed because the video is an external source.
It is only when your videos reside on your site that your server will take a performance hit.

This looks like it might be very useful for people setting up amazon-hosted videos on their site.
But what about those of us who want to use the code for posting audio to our site as a podcast series? The code appears to be explicitly written for video [see below for the relevant excerpt of the code], and I don’t see instructions for what to do if you want to set up audio. Any advice?

Hey – thanks for making this tutorial. Trying to get this to work with WordPress. We have a podcast that we started to host on Amazon S3 because Soundcloud was giving us issues. The WordPress we use is through our ticket provider, and they’ve done a lot of hard-coding to build our homepage. They’re telling me they don’t have a plug-in that will work, but embedding should work fine. But when I try the code you suggest above, I get a grey space with a puzzle piece and the text “No plug-in available to display this content.” (I definitely have QT/flash/everything). I tried using the tags - to enclose all the code and to enclose just the "embed" part, but neither of those worked. Any ideas on how to get some streaming going?

This tutorial was wonderful. I followed your instructions and everything worked perfectly, on a PC. How do I ad access for someone on a iPad or Iphone? I have done a conversion to the iphone format in s3

Hi Tahseen,
I’ll update this tutorial soon but for the time being, here is a simple HTML5 embedding code:
<div>
<video width="720" height="400" autoplay controls poster="myposterimage.jpg" preload="auto">
<source src="//s3.amazonaws.com/mybucket/myvideo.mp4" type="video/mp4">
Sorry, your browser does not support the video tag.
</video>
<div>
Where “mybucket” is the name of the bucket. When you work with a web distribution (highly recommended), in place of //s3.amazonaws.com/mybucket/myvideo.mp4, do //dxxxxx.cloudfront.net/myvideo.mp4
whereas dxxxxx is the domain name of the web distribution.
You must add https: before the path of the video link. I ommitted that here because it gives a strange visual effect in this comment box.

Sorry to resurrect a pretty old thread. I’m having a bit of trouble in that when I have a video properly loaded into S3 with public permissions, the audio will not play when I open the link to the S3 file. The video starts playing, but no sound. Checked volume on the player and on the computer. Tried mp4 and mov formats. Checked that audio works perfectly on my computer’s media player app. But on S3 – nothing. Why is no sound coming through? Any ideas?