Jump to content

Video on website?

eduard

By eduard
in HTML/XHTML

Recommended Posts

eduard Devoted Member

eduard

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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
eduard Devoted Member

eduard

Posted
  • Author
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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>

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
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
eduard Devoted Member

eduard

Posted
  • Author
Posted
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
eduard Devoted Member

eduard

Posted
  • Author
Posted
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
eduard Devoted Member

eduard

Posted
  • Author
Posted

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
eduard Devoted Member

eduard

Posted
  • Author
Posted

Ok, that´s clear! But I also mean the lay out, the content (I know this is personal!), etc.?

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
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
eduard Devoted Member

eduard

Posted
  • Author
Posted

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
eduard Devoted Member

eduard

Posted
  • Author
Posted

Do I have to use a margin in my css? Align in my css? Another div? I really don´t know! (tried all!)

Link to comment
Share on other sites
TheGallery Member

TheGallery

Posted
Posted

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
eduard Devoted Member

eduard

Posted
  • Author
Posted
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...
divinedesigns1 Dedicated Member

divinedesigns1

Posted
Posted
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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...