A mai alkalommal Tamás cikkének köszönhetően honlapunkat fogjuk feldobni egy felugró ablakba történő videóbeágyazással.
Az egészhez egy javascriptre, némi inline css-re, és magára a videóra van szükségünk.
A most következő kódot egy az egyben kimentve egy .html fájlba, láthatjuk a kapott eredményt. A kódban a kommentek a ***-ok után következnek. Ezeket ne másoljuk be.
<?xml version="1.0" encoding="utf-8"?> ***karakterkódolás beállítása
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ***html szabvány meghatározása
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> ***honlap nyelvének beállítása
<head>
<title>Videóbeágyazása popup-ba</title> ***az oldal címe
<style type="text/css"> ***a javascripthet tartozó css utasítás
<!--
.hidden { display: none; }
.unhidden { display: block; }
-->
</style>
<script type="text/javascript"> ***innen kezdődik a javascript függvény ami a popupot kezeli
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideShow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideShow.visibility = 'hidden';
}
else { // IE 4
document.all.hideShow.style.visibility = 'hidden';
}
}
}
</script>
</head>
<body style="background-color: #777;">
<div id="hideShow" style="margin: 50px auto; z-index:9999; height: 365px; width:580px; background-color: #111; border: 5px solid #ccc; border-radius: 5px;"> ***maga a popup div-je
<a style="color: #fff; float: right; font-weight: bold; margin: 10px; text-decoration: none;" href="javascript:hidediv()">Bezárás</a> ***a bezárásért felelős hivatkozás
<div id="video" style="float: left; margin-left: 10px; ">***a div amibe a videót ágyazzuk
<object width="560" height="315"><param name="movie" value="https://www.youtube.com/v/s9qJnBQh008?version=3&hl=en_US&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube.com/v/s9qJnBQh008?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object> ***a beágyazott videó kódja, ezt youtube generálja le
</div>
</div>
</body>
</html>
Jó gyakorlást kívánunk! :-)
Amennyiben szeretné profin kitanulni a weblapkészítés, webprogramozás művészetét, akkor semmiképp se felejtse el leadni jelentkezését induló Akkreidtált PHP-Webprogramozó Mester, és
Akkreditált Web Artist tanfolyamunkra, mely utóbbin egy képzés alatt két sikerszakmát (Webdesigner és Webprogramozó) is szerez!
Jelentkezzen induló áprilisi csoportunkba legkésőbb március 31.-e, éjfélig!
Jelentkezzen itt!
További, áprilisban induló tanfolyamainkról itt olvashat bővebben!
Várjuk szeretettel!
Netlogi C School
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
