HTML5 is relatively a young mark up language but is useful in many ways including creation of canvas and adding videos. So today i am happy to give you a gadget that can play video in your blog-spot blog.

image of a video
Add video

Using a <video> element 

By using a <video > element we can embed a video in a web page. The <video> element will not replace any third-party plugins including Flash video which is the video standard for the Web. Even you tube uses flash content. You can change that width and height in the CSS from 480 and 200 to whatever you wish for. You need to create a new section where you want to display the video following with a header of the video.

Using the src attribute we could load the video from an external website. You can add any title to the video using <h1> tag. The controls attribute tells the browser to give standard control for the video. Auto play tells the browser to start playing the video automatically. The div class with no-html- video shows the error message, "This video will only play in Mozilla Firefox or Google Chrome only" for those using browsers that do not support HTML5 video or the Theora format.

Some video container formats are mpeg4, ogg, .avi etc. Ogg is the video format that Firefox supports. So to use HTML 5 video you must convert to Ogg. You need to install firefogg addon from firefogg.org which is a an open source, GPL-licensed Firefox extension for encoding Ogg video.
 For further details go to http://diveintohtml5.info/video.html and find chapter " Ogg Video with Firefogg ".

You can change the video by changing to your video URL.
Change the title to what you wish,

You can add the following script for allowing users to play the video. You can add the following script to HTML gadget box. Just copy the script and paste it to HTML gadget on Layout of blogger. Save the gadget and see it. You can replace the blue color URL with youtube URL and red colored URL with image of your video.

<style>.youtubeside{background-color:#000;max-width:300px;overflow:hidden;position:relative;cursor:hand;cursor:pointer;height:180px;width:100%;margin:2em auto}.youtubeside img{bottom:0;display:block;left:0;margin:auto;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto;opacity:.9;filter:alpha(opacity=90)}.youtubeside .play{position:absolute;bottom:10px;right:10px;width:48px;height:49px;background-repeat:no-repeat;}</style>
<div class="textwidget"><div class='youtubeside'><a target='_blank' href="https://www.youtube.com/watch?v=zc412z1NZf8" title="Great south Indian dish, Kallummakaya" rel="nofollow"><img src="https://lh3.googleusercontent.com/-YcnAVVbylpc/UzLMGOkw4BI/AAAAAAAAARs/Wkw2yNL6yos/h120/hsdf.PNG" rel="nofollow" alt="Great south Indian dish, Kallummakaya"/></a><div class='play'></div></div>
<div class='youtubeside'><a target='_blank' href="https://www.youtube.com/watch?v=_YbDuRs3Dpo" rel="nofollow" title="How a boy should wear saree"><img src="https://lh3.googleusercontent.com/-xi9qTgnkMOc/UzLMfzKVS9I/AAAAAAAAAR0/uVUIguTNqE4/h120/cds.png" rel="nofollow" alt="How a boy should wear saree"/></a><div class='play'></div></div></div>


Subscribe us please


Comments || >