Sunday, December 25, 2011

How to add a youtube video (with youtube video player) to your website(HTML)

Okay, a lot of people know how to copy a video to a website , and they think that just copy-pasting the URL will do the trick. It will... But did you know that you can get that youtube video player with the video onto your website?

This is called copying the HTML code of that specific video and putting it onto your site.

First, go to that specific video on youtube.

For example, my video :



Now, click on that share button(below the video) and this will show up :




Now , the URL of the video the ''http://youtu.be/ed03....'' And you can copy this URL onto any site and it will just give you a link but the HTML of the video which is ''<iframe width="640" height="360" src="http://www.youtube.com/embed/ed03TkSJV-Q" frameborder="0" allowfullscreen></iframe>'' is when you can add this to your website and then the Video with the video player will show up in your site.

And you also have an option to pick how much do you want the video player's size. Just look at the boxes at the bottom of this picture which have the sizes onto it (640 x 360; 560 x 315)...... Now when you choose a different size than the default size(640 x 360) the HTML code will change. And you can also have a custom size.


Okay, now ,you have to copy the HTML code onto your website. But if you are website doesn't have like a HTML box , this won't work.


I will give you an example, Blog post in Blogger:






Now, you have to click on edit HTML and then you will have to paste the HTML of the video , and this is how it will look.





Now, when you post the given video ,  A black rectangle will show depending on the given sizes you gave and when you click on publish post , and go to your blog , you will see that video with the video player as a blog post.


And that's all , but the video player doesn't have to be a blog post , it can be in your template so it'll stay there permanently , i'll will make a tutorial on that soon.


Thank you for reading this blog post. Remember, if you need more information , contact me at Karims27@hotmail.com


-Karim

No comments:

Post a Comment