How To Embed Video Into A Webpage
It’s not an easy matter to master HTML, especillly if you’re just launching your blog or website. Here free patterns and templates can really simplify a novice webmaster’s life. So it’s very important to keep eye on the tools which assist with the hard work of putting various content into the markup language. A particular role should be assigned to multimedia which often reveals difficulties with web page integration. Since video content is one that encounters more problems, let’s scan the most popular means of video intergartion into a web page.
1. YouTube player
If you run a YouTube channel, there’s a good opportunity to use YouTube embedding facilities and move ahead with your video promotion. Still keep in mind that having uploaded your video content to YouTube, you gave consent to its wordlwide distribution, so you might come across your video on other resources and even observe some adventurous people making money on it. The embedding procedure is the following: you upload video to your channel, go to player, acquire the embed code (Share>Embed) which looks like
<iframe width=”420″ height=”315″ src=”http://www.youtube.com/embed/uNtpLFJHlhc” frameborder=”0″ allowfullscreen></iframe>
and incorporate it into a desired web page. YouTube also allows users to modify the custom player like play in HD, switch to HTTPS, suggest other videos, etc.
2. Free video converters
There are several good apps which assist with converting video into streaming formats – FLV, SWF and MP4. I’d like to focus on the video converter from Freemake.com which delivers faster and higher output results if compared to its competitors. The app accepts a wide range of video formats and complements the resulted FLV and SWF files with ready embed code. All you need is just to upload the output video files to your server, copy the code and insert it between the tags <body> and </body>. Here is the example of embed code:
<object id=”Object1″ type=”application/x-shockwave-flash” data=”player_flv_maxi.swf” width=”420″ height=”240″>
<param name=”movie” value=”player_flv_maxi.swf” />
<param name=”wmode” value=”opaque” />
<param name=”allowFullScreen” value=”true” />
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”quality” value=”high” />
<param name=”menu” value=”true” />
<param name=”autoplay” value=”false” />
<param name=”autoload” value=”false” />
<param name=”FlashVars” value=”flv=Wildlife (1).flv&width=420&height=240&autoplay=0&autoload=0&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&title=Wildlife (1)&margin=0&buffershowbg=0″ />
</object>
This way is highly effective if your hosting provider is reliable enough and you don’t care about online video promotion.
3. Streaming video hosting providers
The key difference of this means is that your videos are hosted on a separate video platform and the hosting provider is fully responsible for their lifecycle. Therefore, such services are usually charged, take for example StreamingVideoProvider.co.uk - it has three paid packages depending on your bandwidth and storage needs. There are also numerous options for your videos being displayed – custom players, TV channel playlists, etc. The uploading process takes no more than 10 minutes, it’s conducted either from your control pannel, ftp client or even from your own website. The good thing is that you can buy white-label player and even get money for your video playback.
4. HTML5 video intergration
HTML5 is an innovative language for presenting web content. It not only brings new syntactical features like <video>, <audio>, <header>, but establishes high standards for video playback directly in browsers. Thus, the latest versions of Chrome, Firefox and Safari support HTML5 video which can be easily reproduced on any device: PC, Mac, iPad, Android, etc. which is a big plus. However, this means is rather for power users because the process of video integration requires deep knowledge. Here is sample HTML5 code:
<video width=”420″ height=”340″ controls=”controls”>
<source src=”movie.ogg” type=”video/ogv” />
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.webm” type=”video/webm” />
<object width=”320″ height=”240″ src=”movie.mp4″>
<embed width=”320″ height=”240″ src=”movie.swf”>
Your browser does not support video
</embed>
</object>
</video>
The process of embedding is the following: you convert a video to all popular video formats for the devices you’re going to play them on (MP4 , SWF, OGV or WebM) and upload them all to your server. Put a code structure like the one above between <body></body> and don’t forget to watch the video in various browsers.
Category: Webmaster
About the Author (Author Profile)
I'm a software enthusiast and social media marketing specialist. Enjoy writing about popular multimedia apps and take an active part in their promotion in social media. The last contribution was for MP4 Converter from Freemake.com.Subscribe
If you enjoyed this article, subscribe to receive more just like it.
nice, its really working thanks for information
This is truly useful post, thanks, will try with HTML 5. Hope, it works
Twitter: Mix Twist
says:
Thanks for sharing cool tutorial this will really help to newbies.
Jass recently posted..Akash Tablet World’s Cheapest Android Tablet in India
I was just trying to get my you tube video on my home page and stumbled across your post, Thanks for the tutorial. It worked!
Amy recently posted..How to Get Rid of Cellulite Naturally
I’m happy you liked it
Using iframe is best method to pull up external video content to the site. Thanks for sharing some more ideas. I just gonna try it.
Thanks for the tips as HTML is really hard for me and I always ask some one to help me when I need.
Thanks for the tutorial. That was easy. I’ve been using YouTube for embedding videos and I can embed videos quickly without lifting a finger
I think this cover the topic completely, I believe that future and especially for mobile devices embedding is definitely based on HTML5. Other than that, I think everybody can handle embedding video from Youtube.
Thank you very much as HTML is the thing that I know little about and I usually ask for help as I am not sure of my knowledge at all. Your advice is the thing that helped me to clarify some points.
iframe is not allowed all the times in wordpress , for that i use smart youtube wordpress plugib
iPhone 4 Problems recently posted..How to Upgrade iPhone 4 to iOS 5
nice list. I am currently using the html integration, and it works pretty good.
Gadgets Blog recently posted..10+ Best iPhone 4S Apps
If plan to save bandwidth, probably Youtube or other video sharing website is a good idea. If want to protect video, probably embedding flash and trying to lock it with JavaScript. HTML5 is quite new, but I think it is very good option. Host remotely, may need advanced coding.
Thanks for the tips. In general I would use iframe as a last resort.
Who ever thought we would be sharing videos over computer screens? WordPress has made it easier to embed youtube videos compared to in the past.
Bar Stools Bobby recently posted..Happy I Purchased Some Contemporary Blue Bar Stools!
I didnt know that because I started my blog recently, and this article will for sure help me in embedding video… Thanks
JD recently posted..Postmenopausal Osteoporosis – Part 1 The Inevitable ???