Musisz mieć plik w którym będą osadzone:
- obrazek (tag <img/>) z ustawionym zdarzeniem onclick. Cała magia z onclick polga na tym, że jak klikniesz gdziekolwiek na obrazek to wywoła się funkcja która jest przypisana do onclick. W przykładzie który podałeś wygląda to tak:
Kod:
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
<img border="0" onclick="MM_openBrWindow('szablon.html','Nazwa okienka','width=800,height=500, scrollbars=0')" alt="opis_obrazka" src="perlik.jpg">
Czyli po kliknięciu na obrazek odpalasz funkcję MM_openBrWindow(). Funkcja przyjmuje 3 parametry: theURL,winName,features. Definiujesz je w zdarzeniu onclick tak jak na przykładzie powyżej.
Zadaniem funkcji MM_openBrWindow() jest otworzenie okienka zgodnego z parametrami które przekazałeś. W powyższym przypadku w okienku będzie otwarty plik szablon.html, Nazwa okienka nie działa bo ta wartość jest zaciągana z YT, pozatym ustalasz wielkość okienka i to że ma nie mieć suwaków. Pamiętaj że wielkość otwieranego okna powinna być większa nie wielkość filmu.
Sam plik szablon.html może wyglądać tak:
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sebile Koolie Minnow</title>
<style type="text/css">
body {
background-color: #000;
text-align: center;
}
</style>
</head>
<body>
<iframe width="640" height="390" src="http://www.youtube.com/embed/Q4E0bK1y8wU" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Generalnie można by się w powyższym przykładzie doczepić jeszcze do wielu rzeczy, ale pokazuje on ogólną zasadzę działania a chyba o to chodziło
O parametrach przekazywanych do "okienka" możesz poczytać np. tu:
http://www.w3schools.com/jsref/met_win_open.asp