Embedding video & audio in WordPress – revision 3
By Rudolf Boogerman |
43 comments... Click to Contribute.
If you want to play a video directly in your posts or pages, you cannot use the iFrame method because it doesn’t work in WordPress. iFrame is a way to import existing pages into your own page and it is frequently used by AudioAcrobat and other podcast services. The only way to make iFrame work in WordPress is by creating an external html page and link to it in WordPress. But that is not exactly an elegant solution, so let’s forget about iFrame. Fortunately, there are two methods to get a good result of which method 2 has preference:
Using code tags for embedding
For embedding(to embed a video or audio in your page), you need to use the <code></code> tags in the html editor (not the visual) to make it work. The embed method has the advantage that it can be added in any type of website without having to install a plugin and it covers a wide range of formats and audio and many video channels provide the code for you. With embedding you can play MP3, WAV, AIFF, JPG, PNG, MOV and GIF. Not all browsers support MOV, WAV or AIFF, though.
Here is an example of embedding in WordPress. It is simply copied and pasted from a YouTube video.
The code looks like a horror, but if you take the time to have a good look, it isn’t all that bad. Many thinks looks scary the first time you see them :
<code><object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/K-r06LgKzMY&hl=en&fs=1&rel=0″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/K-r06LgKzMY&hl=en&fs=1&rel=0″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object></code>
And below is the result:
You actually can use this code to embed videos from your own domain as well except FLV, MP4, RM, and ACC as they require a player. But QuickTime (mov) and MP3 are no problem (except on systems without QuickTime installed). Only the red parts need to be customized, all the rest is used exactly as is. Have a look here:
<code><object width=”425″ height=”344″><param name=”movie” value=”http://www.mydomain.com/myvideo.mov″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.mydomain.com/myvideo.mov″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object></code>
Width is simply the width of the video in pixels, same with height. A pixel is one light-dot on your computer screen. so, width=”425″ means, make this video 425 light-dots wide.
http://www.mydomain.com/myvideo.mov is the path to your video. If you saved your video into a folder called myvideos and the video is called greatvideo.mov then the path to your video is: http://www.mydomain.com/myvideos/greatvideo.mov
That’s it, no magic tricks needed.
Flash Player plugin
Another method is to install the Flash player plugin from Joshua Eldridge which includes the Flash video player from Jeroen Wijering. With this player, you won’t have the problem of being redirected to YouTube when you click the big arrow in the middle of the video to start it. Once installed, embedding video becomes very easy. In the html editor or the visual editor, you type something like this:
where http://www.brightcove.tv/title.jsp?title=1386343200 is the link to a Brightcove video. Thus, if you fill in your own video in this way http://www.mydomain.com/myvideos/greatvideo.mov then it will work like a charm and it doesn’t matter if you type this in the visual- or html editor mode.
The player supports FLV, MOV, MP4, MP3, M4a, WAV, AIFF, AAC, JPG, PNG, MOV, and GIF.
I use this method in the Art videos category. The player recognizes a wide variety of media, so if you have an audio, the player will handle it correctly.
Disadvantage:
Not all Video network services support this player . For example, Vimeo videos cannot be imported this way, therefore you need to resort to embedding again in that case. However, services like Vimeo, Myspace, etc,… provide their own embedding code to copy and paste into your site.
NOTE: There is a new tutorial with JW Player here: How to Embed Streaming Video & Audio with HTML5 Fallback – using JW Player 5.6
Topics: Blog stuff, Hardware reviews, Video Channels/Networks, Video/audio service reviews | Site search | Write comment
This article has 43 comments.
Related Articles:
43 Comments »
If you have any questions or suggestions, you can leave a comment on this article below. Comments are subject to an approval process before they are published. By posting a comment, you agree with the terms of use.
Subscribe to the RSS feed
September 22nd, 2008 at 7:23 am
Hi,
I just need some help if possible, whenever i drop flash embed into the <code> tags in the html editor then one i save it then it erases everything in the <code> tags. Any ideas?
Thanx alot
Leon du Preez
September 22nd, 2008 at 7:53 am
Normally, this should not happen. I did notice that you write <code><code> instead of <code></code> which might have something to do with it, unless that is a typo in your comment here. It may depend on the version of WordPress as well, I couldn’t figure that out.
Or there is a typo in the embedding code. In any case, to avoid problems, you can download a Flash player plugin and use the native code from the plugin which is very simple.
Embedding code will be phased out in the future as it is depreciated code. Here is a good plugin to download: http://www.mac-dev.net/blog/index.php
Just follow the instructions. Let me know if you have further problems.
April 12th, 2010 at 4:11 pm
I could kiss you! After hours of frustration with plugins that didn’t work at all, I found your instructions….worked like a charm, and took about 30 seconds!
Thank you!
April 12th, 2010 at 4:55 pm
Hi Nancy,
I’m glad you found this useful. Thanks for the kiss
Rudolf+++
June 18th, 2010 at 9:16 am
ok you SHOW NO WAY to imbed AUDIO in WORDPRESS!!!!! YOU GO STRAIGHT TO VIDEO!! THERE IS NO WAY TO IMBED AUDIO IN A WORDPRESS BLOG UNLESS YOU BUY A ‘SPACE UPGRADE’ FROM THEM! THEY FORCE YOU TO DO THIS!! IVE TRYED [audio http://music url] oh the cute lil ‘audio player’ appears BUT WHEN YOU CLICK ON IT IT DONT WORK!!!! YOU ARE FORCED TO BUY THE SPACE UPGRADE $19.99 FROM WP! everyone knows how to imbed video from youtube in wp. skip the friggen semantics and GET TO THE POINT!!! THE QUESTION IS: HOW TO IMBED AUDIO AUDIO AUDIO IN WP BLOGS FOR FREE! sheesh!
June 18th, 2010 at 9:59 am
You are right, I forgot to include audio in this article.
There is no need to buy anything (at least if you have a standalone version of WP), here is an example how you can place an audio:
[flashvideo filename=myaudio.mp3" width=200 height=220 image=andrew-patricio.jpg /]
where myaudio.mp3 is the audio and andrew-patricio.jpg is a poster image. If you do not want a poster image, leave out the part image=andrew-patricio.jpg and set the height to 20.
Best use a full path to image and audio, starting with http://
And here is this example in practice: http://www.womencorp.org/?p=365
That’s it.
Would be nice if you were a bit more polite next time.
June 19th, 2010 at 5:18 pm
@art, WP programmers worked thousands of hours on this and you complain about $20?
September 15th, 2010 at 7:54 pm
One thing about WordPress is that it does NOT like apostrophes from different editing sources.
When you cut an paste an apostrophe from Word or a.txt file it will sometimes error out the post or page. This happened to my site countless times.
September 16th, 2010 at 11:47 am
From a txt file, when you switch from Mac to PC or the other way around, that is possible. With MS Word or OpenOffice, you copy also hidden formatting information that can mess up a page. Best use the “T” icon in the editor to paste text indirectly so that formatting is filtered out. In fact, most CMS have this problem, including Joomla.
October 30th, 2010 at 2:41 pm
Hi,
I found your tutorial very useful. I was wondering though, is there a way to centre the video, and what would be the code for that? Thanks so much
October 31st, 2010 at 8:21 am
Hi Alice,
Yes, you can. You make use of the div tag, like this:
<div align="center">
<object …..>…..
…. </embed></object>
</div>
To make sure WordPress does not wipe away the div tag afterwards , enclose it in code tags, like this:
<code>
<div align="center">
<object……>…..
….</embed></object>
</div>
</code>
December 1st, 2010 at 2:52 am
Hey, good content.
I used the centre align code. good stuff keep it up.
February 2nd, 2011 at 2:41 pm
This doesn’t work at all for me. I’m using WordPress 3.0.4. Just trying to get a Quicktime or FLV video on my ftp site working with a player. Can’t seem to get it working this way using Insert in the Word Press menu, but this code is not giving me anything at all. Been trying and trying.
February 2nd, 2011 at 7:40 pm
Hi DVD,
Can you give me a sample page with the embed code so that I can check?
February 28th, 2011 at 12:46 am
Didn’t work for me either.
I’m trying to embed an mp4 which is one the host with wordpress.
And unfortunately, there is no link to give because the page is not going to be published until the video works.
February 28th, 2011 at 6:33 am
Hi Dan,
Can you show the code you are trying to publish? It might contain an error.
March 16th, 2011 at 7:09 am
Hello!
I can’t make it work. Why is it that I can embed youtube-clips but nothing else works?
Regards/ Staffan
March 16th, 2011 at 11:20 am
I’m sorry Staffan, you do not give enough information to respond to this question. Do you have a test page?
March 18th, 2011 at 7:14 am
i wanted to stream a video from youtube to my site,
i did as intructed but the frame did not display.
March 18th, 2011 at 8:36 am
Hi Bitrus,
Did you try with the plugin or embedding code? If you used the embedding technique, do you have a test page I can look at?
April 9th, 2011 at 4:20 am
Hi Rudolf,
sorry to be so ignorant.
Am i to understand, that if i copy your green text contained within the
andtags. Change the portions in red.The dimensions and the address where the mp4 file is located. I copy that into the html portion of a new post in WPress.
The location address for me is my WP site and therefore mydomain.com/tapcophonecontoller/wp-content/uploads etc
It should show and play the file in the post?
So i am adding this
now when i put that into the HTML, and update. It disappears and im left with
I did see another person with that problem.
But i retyped it all in.
SOrry for all the space my question took up.
April 10th, 2011 at 6:43 am
Hi John,
Indeed, you copy the green code and change the red part according to your situation. I cannot see the code you added because the commentbox doesn’t alow that, sorry about that.
But, MP4 is best played via a player. It won’t play without a video player on most modern browsers, although previously I said you could. You can install a video plugin like Flash Video or Simple Video. Both create the code for you automatically. The embedding method I describe above works best with MOV and MP3, it is not longer reliable with other formats.
Rule of the thumb today is: use a video plugin if you have a variety of formats.
I adapted this article in the meantime because it is quite old, not everything was correct anymore. A couple of formats are no longer widely used, like AVI or WMV.
June 11th, 2011 at 8:39 pm
Hi dear all,
I really appreciate your help at this matter. I want to embed a podcast (mp3) hosted on Podbean.com. I’ve tried different options read in different forums, until I found this http://en.support.wordpress.com/space-upgrade/ Does it mean there is no way to upload an mp3 file but paying for an upgrade? If there is a simple way, please let me know.
Thank you!
Evelyn
P.S. This is what I read in this forum, but I don’t know how to apply it without paying.
Rudolf Boogerman Says:
June 18th, 2010 at 9:59 am
“You are right, I forgot to include audio in this article.
There is no need to buy anything (at least if you have a standalone version of WP), here is an example how you can place an audio:
[flashvideo filename=myaudio.mp3" width=200 height=220 image=andrew-patricio.jpg /]
where myaudio.mp3 is the audio and andrew-patricio.jpg is a poster image. If you do not want a poster image, leave out the part image=andrew-patricio.jpg and set the height to 20.
Best use a full path to image and audio, starting with http://
And here is this example in practice: http://www.womencorp.org/?p=365
That’s it.”
June 12th, 2011 at 11:44 am
Hi Evelyn,
The tutorial here is meant for standalone versions of WordPress. If you are on WordPress.com, you probably have to upgrade because they blocked rich media content. Now, I do not have first hand experience with wordpress.com, so I can’t assure you that paying is going to solve this.
Instead, you might consider having your own wordpress site on shared hosting. That way, you have no restrictions whatsoever.
Dreamhost.com, hostgator.com and others make it really easy to install WordPress since they have it in their application vault.
Also, you do not lose your content. You can export it via Tools > Export and then import all your categories, posts and pages in your new installation, again via Tools, but this time select Import.
I would really consider this because being on wordpress.com is fine to start with, but if you want to move on and make your site successful, you need your own domain name and web space.
I hope this helps?
July 17th, 2011 at 4:23 am
pls guys am new to website building i do not understanding any thing here pls i want to build a website where visitors can download mp3 and video but i do not know how to start my coding help me pls. my e-mail is youngwest2020@yahoo.com i need codes to use. pls guys help me.
July 17th, 2011 at 5:56 am
Jeremiah, for downloading, you just create a link to the video or audio, like:
<a href="http://mydomain.com/my-audio.mp3">Download audio</a>I hope this helps?
August 19th, 2011 at 1:21 pm
I’m positive it is my error, but I am trying to use your code to embed the video within a WP for Joomla blog post. I’m using Joomla 1.5.22, WP 3.0.1.2, and of course the video files are .mov for the time being. I’m working on having my boss allow me to purchase conversion software because I’m and getting nothing but horrible headaches dealing with .mov files. When I use the following code without the double brackets before the code it doesn’t show up at all in the post. Just a blank space. Any advice?
{{
}}August 19th, 2011 at 1:21 pm
OK, how can I show you the code that I copied?
October 23rd, 2011 at 11:06 pm
Just wanted to say thanks for the post – very helpful and quick to implement.
October 28th, 2011 at 4:01 pm
thanks for sharing
can you add a bouton to translate content
cprdialy
October 30th, 2011 at 12:26 pm
good information, thanks for this share.
November 2nd, 2011 at 2:39 pm
I am trying to embed a video into a wordpress blog which is hosted through godaddy.com (I think that’s how it works). It uses flash player and will not embed. Can you help?
November 2nd, 2011 at 2:51 pm
p.s. this is the embed code:
November 2nd, 2011 at 7:43 pm
Hi Lauren,
The code seems to work here. Did you add the
tags as explained above?November 6th, 2011 at 9:56 am
Now in he new version of wordpress we can view it directly..
November 15th, 2011 at 5:54 pm
Thanks very hope
November 16th, 2011 at 7:33 am
Nice tutorial…. thanks !!!
November 18th, 2011 at 11:30 pm
And here, 3 years and 2 months after the original post, I am seeking assistance from Rudolf Boogerman.
Hopefully, this isn’t too far off the subject. I am looking for some simple html code to make an mp3 play starting at a certain start time. With YouTube videos, you simply add #t=01m42s to the end of the file, and it starts playing at the designated time, in this case 1 minute 42 seconds.
Is there anything like this for playing an audio file in the browser? (Ex. domain.com/song.mp3#t=01m42s or something similar) or some simple code to add to the code for the Google audio player to make a file start at a certain anchor or cue? (Ex. of Google audio player code below)
Thanks for any assistance!
November 18th, 2011 at 11:32 pm
Oops, the Google code didn’t show up. Probably not necessary anyway. I was just showing where I was starting from. Thanks again!
November 19th, 2011 at 6:43 am
I found this tool : http://www.youreplaytube.com/mp3player.html
This convert YouTube Video Player Into YouTube Audio Player and offer embed code for it.
Beautifull!
November 21st, 2011 at 12:36 pm
Thanks for the plugin. Will give it a try!
November 21st, 2011 at 2:13 pm
Hi Joy,
It looks like the google player does not have an option to start an audio later in time.
You can use JWplayer from http://www.Longtailvideo.com instead. It has the start parameter expressed in seconds, but easy is relative here.
Best start with this introduction to learn how to work with JW player:
http://www.miracletutorials.com/embed-streaming-video-audio-with-html5-fallback/
December 22nd, 2011 at 5:40 am
Hi Rudolf,
I’m trying to embed a BBC video into a post. I’ve added the CODE tags to it but even though the placeholder shows up, the video and the player won’t show. Here’s a copy of the code for you:
Your help would be most appreciated.
Cheers.