Jump to content

Video on website?


eduard
 Share

Recommended Posts

I don´t manage to have a Youtube video on my website by using HTML5!How? <!DOCTYPE html><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div id="floater"><ul id="flags"> <li>eng<a href="american.html"><span id="amer"></span></a></li> <li>es<a href="spanish.html"><span id="spanish"></span></a></li> <li>d<span id="germ"></span></li> <li>nl<span id="dutc"></span></li> <li>f<span id="fren"></span></li> </ul></div><!--end #floater --><div id="vertical"></div><div id="main"><img id="eduard" src="eduard.JPG" alt="img Eduard Lid"><video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video><div id="content"><p>Web design<span class="right">Diseñador de sitios web</span></p><p>Translator<span class="right">Traductor</span></p><h1>Eduard Lid</h1><ul id="links"><li><a href="american.html">more</a></li><li><a href="spanish.html">más</a></li></ul></div><!--end #content --></video></div><!--end #main --><p id="copyright">Copyright © 2012</p></body></HTML>* { margin:0; padding:0; list-style-type:none; }html,body{ height:100%; background-color:#008; }body { min-height:368px; /* total vertical height of the #main */ font:bold 18px verdana,arial,helvetica,sans-serif; }#floater { position:absolute; z-index:1; width:100%; min-width:940px; top:0; left:0; }#flags { float:right; width:256px; height:20px; margin:10px 0px; }#flags li { position:relative; float:left; width:24px; margin:0 2px; font-size:8%; font-weight:normal;} #flags a,#flags span { position:relative; display:block; width:20px; line-height:-2px; font-size:0%; font-weight:normal; }#flags span { position:absolute; top:0; left:0; width:-6px; height:24px; background-position:0 -2px; }#flags span:hover { box-shadow:#eef 0 0 0px; }#amer { background-image:url(americanflag.gif); }#spanish { background-image:url(spanishflag.gif); }#germ { background-image:url(germanflag.gif); }#dutc { background-image:url(dutchflag.gif); }#fren { background-image:url(frenchflag.gif); }#vertical{ float:left; width:100%; height:50%; margin-top:-184px; /* half the total vertical height of the #main */ }#main { position:relative; min-width:940px; height:360px; border:4px solid #808080; clear:both; background-color:#fff; }#eduard { float:left; border-right:4px solid #808080; }video { float:right; border-left:4px solid #808080; }#content { margin:0 270px; padding:0px; font-size:22px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color:#000000; }.right { float:right; width:260px; text-align:right; }h1 { margin:155px 0 31px; font-size:250%; text-align:right; color:#708090; }#links { text-align:right; font-size: 12px; }#links li { display:inline; margin:0 10px; }#links a { color:#000; }#links a:hover { color:#008; }#copyright { position:absolute; width:99%; bottom:5px; left:0; font-size:50%; text-align:right; color:#FFFFFF; }

Link to comment
Share on other sites

Do YOU have a youtube video converted to '.ogg', or '.mp4' formats that is called movie, and resides at the same location as this page, No! well it won't work otherwise, unless you use old < object> or resurrected <embed> method as a fallback to play youtube format..

Link to comment
Share on other sites

I don´t understand your reply!I used this code (html5 tutorial): <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video> and inserted into the .ogg src (I´ve Firefox as browser!) the url of Youtube (I´ve also tried the url adding ´&html5=true´But all didn´t work! (P. s. this is a public computer! Therefore I can´t install anything!)

Link to comment
Share on other sites

You need a movie file in *.ogg format as in movie.ogg THIS movie file MUST be in the same location as the PAGE with

<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg" />Your browser does not support the video tag.</video>

as you CAN'T just enter the file name, and it expect it to find it for you, if the file is somewhere on the web, or your usb stick for example. YouTube use *.flv format, SO you will HAVE to convert to *.ogg, AND *.mp4 format, as some browsers WILL ONLY SHOW ONE OR THE OTHER, and NOT BOTH formats.IF you still want to use youtube *.flv format, it seems you will need to use a iframe, and NOT the html5 <video> element

<iframe src="http://www.youtube.com/embed/youtube_id?html5=1"></iframe>

Edited by dsonesuk
Link to comment
Share on other sites

http://apiblog.youtube.com/2010/07/new-way-to-embed-youtube-videos.html You have to realize what you are doing. The example you are following is for showing a local file in the video tag, same as you would an image. To link to an external file on a remote server, then you have to use a different implementation. Again, I know it is against your nature, but read the page very carefully. It explains what each attribute does, what file formats are supported, and what browsers support it.http://www.w3schools.com/html5/html5_video.asp
Link to comment
Share on other sites

You need a movie file in *.ogg format as in movie.ogg THIS movie file MUST be in the same location as the PAGE with
<video width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg" />Your browser does not support the video tag.</video>

as you CAN'T just enter the file name, and it expect it to find it for you, if the file is somewhere on the web, or your usb stick for example. YouTube use *.flv format, SO you will HAVE to convert to *.ogg, AND *.mp4 format, as some browsers WILL ONLY SHOW ONE OR THE OTHER, and NOT BOTH formats.IF you still want to use youtube *.flv format, it seems you will need to use a iframe, and NOT the html5 <video> element

<iframe src="http://www.youtube.com/embed/youtube_id?html5=1"></iframe>

I did that! see: http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061/How-To-Add-a-YouTube-Video-to-Your-Web-Site.htm But I validated this code and I have 7 errors now?
Link to comment
Share on other sites

http://apiblog.youtu...ube-videos.html You have to realize what you are doing. The example you are following is for showing a local file in the video tag, same as you would an image. To link to an external file on a remote server, then you have to use a different implementation. Again, I know it is against your nature, but read the page very carefully. It explains what each attribute does, what file formats are supported, and what browsers support it.http://www.w3schools...html5_video.asp
Thanks very much for this reply! I´ll save the page in my ´Favorites´.
Link to comment
Share on other sites

My website isn´t perfect yet! (e. g. the width of rhe video isn´t good! What width should I use?)What do I still have to change? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><HTML><head><meta http-equiv="content-type" content="text/ html; charset=UTF-8"><title>Eduard Lid</title><link rel="stylesheet" type="text/css" href="ex1.css"></head><body><div id="floater"><ul id="flags"> <li>eng<a href="american.html"><span id="amer"></span></a></li> <li>es<a href="spanish.html"><span id="spanish"></span></a></li> <li>d<span id="germ"></span></li> <li>nl<span id="dutc"></span></li> <li>f<span id="fren"></span></li> </ul></div><!--end #floater --><div id="vertical"></div><div id="main"><img id="eduard" src="eduard.JPG" alt="img Eduard Lid"><iframe width="420" height="315" src="http://www.youtube.com/embed/h2AWKgU0cN4" frameborder="0" allowfullscreen></iframe> <img id="lake" src="lake.JPG" alt="img lake Villarrica"><div id="content"><p>Web design<span class="right">Diseñador de sitios web</span></p><p>Translator<span class="right">Traductor</span></p><h1>Eduard Lid</h1><ul id="links"><li><a href="american.html">more</a></li><li><a href="spanish.html">más</a></li></ul></div><!--end #content --></div><!--end #main --><h1>Eduard Lid</h1><p id="copyright">Copyright © 2012</p></body></HTML>* { margin:0; padding:0; list-style-type:none; }html,body{ height:100%; background-color:#008; }body { min-height:368px; /* total vertical height of the #main */ font:bold 18px verdana,arial,helvetica,sans-serif; }#floater { position:absolute; z-index:1; width:100%; min-width:940px; top:0; left:0; }#flags { float:right; width:256px; height:20px; margin:10px 0px; }#flags li { position:relative; float:left; width:24px; margin:0 2px; font-size:8%; font-weight:normal;} #flags a,#flags span { position:relative; display:block; width:20px; line-height:-2px; font-size:0%; font-weight:normal; }#flags span { position:absolute; top:0; left:0; width:-6px; height:24px; background-position:0 -2px; }#flags span:hover { box-shadow:#eef 0 0 0px; }#amer { background-image:url(americanflag.gif); }#spanish { background-image:url(spanishflag.gif); }#germ { background-image:url(germanflag.gif); }#dutc { background-image:url(dutchflag.gif); }#fren { background-image:url(frenchflag.gif); }#vertical{ float:left; width:100%; height:50%; margin-top:-184px; /* half the total vertical height of the #main */ }#main { position:relative; min-width:940px; height:380px; border:4px solid #808080; clear:both; background-color:#fff; }#eduard { float:left; width:285px; border-right:4px solid #808080; }#lake{ float:right; width:286px; border-left:4px solid #808080; }#content { margin:0 270px; padding:0px; font-size:22px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; color:#000000; }.right { float:right; width:260px; text-align:right; }h1 { margin:155px 0 31px; font-size:250%; text-align:right; color:#708090; }#links { text-align:right; font-size: 12px; }#links li { display:inline; margin:0 10px; }#links a { color:#000; }#links a:hover { color:#008; }#copyright { position:absolute; width:99%; bottom:5px; left:0; font-size:50%; text-align:right; color:#FFFFFF; }

Link to comment
Share on other sites

the width of rhe video isn´t good! What width should I use?
You said it yourself:
this is personal
It's up to you. Tweak it until it looks good to you. We don't know what you think looks good so how are we supposed to know what width you should use?
Link to comment
Share on other sites

I now have problems with the FTP server, so can´t show you! But how do I get that video exactly in the center of 2 images (fotos)? Now it´s next to the left image!

Link to comment
Share on other sites

I'd just like to add that there is an embed video option in youtube videos (under Share->Embed). You can change some settings in that window and if you are going to use a custom width, it will automatically adjust the height so the video has the correct dimensions.

Link to comment
Share on other sites

I'd just like to add that there is an embed video option in youtube videos (under Share->Embed). You can change some settings in that window and if you are going to use a custom width, it will automatically adjust the height so the video has the correct dimensions.
Thanks! However too late; my website is finished (so far)!
Link to comment
Share on other sites

  • 2 weeks later...
Thanks! However too late; my website is finished (so far)!
dude your a total ###### you do know that right? cut the dam attitude gosh sigh i wouldnt be surprise if everyone just stop helping you
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...