Видео из сайта http://vimeo.com в отдельном окне (Pirobox)

HTML ↴

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Видео из сайта http://vimeo.com в отдельном окне (Pirobox)</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css" >
*{margin:0;padding:0;}
.piro_html {position:absolute; top:0; left:0; padding:0; width:500px; height: 500px; margin:0; display:block; padding:0; z-index:150001; padding:0;  }
.piro_html table,.piro_html tbody,.piro_html tr,.piro_html th,.piro_html td{margin:0;padding:0;border:none;}
.piro_html img{ margin:0; padding:0; border:none;}
.piro_html .h_t_l{ width:10px; height:10px; background: url(pirobox/caption.png);}
.piro_html .h_t_r{ width:10px; height:10px; background: url(pirobox/caption.png);}
.piro_html .h_t_c{ cursor:move; height:10px;background: url(pirobox/caption.png);}
.piro_html .h_c_l{width:10px; background: url(pirobox/caption.png); }
.piro_html .h_c_c{background: url(pirobox/caption.png);margin:0; padding:0;}
.piro_html .h_c_c .div_reg{ background: url(pirobox/caption.png); width:480px; overflow:hidden; height:480px; margin:0; padding:0; }
.piro_html .h_c_c .div_reg img{ cursor:move;}
.piro_html .h_c_r{width:10px; background: url(pirobox/caption.png);}
.piro_html .h_b_c{ cursor:move; height:10px;background: url(pirobox/caption.png);}
.piro_html .h_b_l{ width:10px; height:10px;background: url(pirobox/caption.png);}
.piro_html .h_b_r{ width:10px; height:10px;background: url(pirobox/caption.png);}
.piro_overlay{position:fixed; top:0; left:0; width:100%; height:100%;  z-index:150000;background:#fff;display:none; cursor:pointer;}
.piro_loader{position:absolute;top:50%;left:50%;margin:-59px 0 0 -59px;width:118px;height:118px;display:block;z-index:150005;  cursor:pointer; }
.piro_loader span{position:absolute;top:50%;left:50%;margin-top:-36px;margin-left:-36px;width:72px;height:72px;display:block;z-index:150009; background: url(pirobox/loadinfo.gif) center top no-repeat; }
.piro_title{position:fixed; background: url(bg_title.png) bottom repeat-x;top:0;left:0;width:100%; text-align:center;display:block; padding:6px 0 10px 0; color:white; z-index:150000; font-size:18px; display:none;}
.btn_info{position:absolute;bottom:-7px;right:-7px;width:25px; height:25px;margin:0;display:block; padding:0px; color:black; cursor:pointer; background: url(b_w/info.png) no-repeat; z-index:1500440}
.caption{position:absolute;bottom:10px;left:10px;margin:0;display:block; padding:0px; color:black; cursor:text; background: url(pirobox/caption.png); z-index:150018}
.caption p{ display:block; margin:0;padding:7px 5px; text-align:center; font-weight:normal; font-size:14px; color:white; z-index:150019; color:white;}
.nav_container{position:absolute; bottom:-20px; right:0; height:20px; width:60px; background: url(pirobox/caption.png); z-index:1500190000000;}
.piro_close{position:absolute;right:20px;height:20px;width:20px;background: transparent url(pirobox/close.png) no-repeat center center;cursor:pointer;margin:0 0 0 0;z-index:150022;display:none;}
a.piro_next{position:absolute;width:20px; right:0px; height:20px;text-indent:-999em;outline:none; display:block; margin:0;background:url(pirobox/next.png) center right no-repeat; border:none; cursor:pointer;z-index:150023}
a:hover.piro_next{background:url(next.png) center right no-repeat;}
.piro_next_fake{position:absolute;width:20px; right:0px; height:20px;outline:none; text-indent:-999em; display:none; margin:0;background: url(pirobox/next.png) center right no-repeat; border:none; cursor:auto;z-index:150020}
.piro_prev_fake{position:absolute;width:20px; right:40px; height:20px;outline:none; text-indent:-999em; display:none; margin:0;background: url(pirobox/prev.png) center right no-repeat; border:none; cursor:auto;z-index:150020}
a.piro_prev{position:absolute;width:20px; right:40px; height:20px; text-indent:-999em; outline:none;display:block;margin:0;background: url(pirobox/prev.png) center left no-repeat;border:none; cursor:pointer; z-index:150024}
a:hover.piro_prev{background:url(pirobox/prev.png) center left no-repeat;}
a.close_pirobox{color:#bb0f05;}
/*::::::: PIROBOX V.1.0. :::::::::*/
html, body {  margin: 0;padding: 0; }
body {  font-family: 'SansationRegular';font-size: 12px;}
/*::::::::::::REGOLE GENERALI:::::::::::*/
ul,li,dl,dt,dd{list-style-type:none;margin:0;padding:0;}
dt{text-transform:uppercase;}
img{border:none;padding:0;margin:0;}
p{margin:0;padding:0;}
h1,h2,h3,h4{margin:0;padding:0;}
a{color:#fff;text-decoration:none;outline:none;background:none;padding:0;}
a:hover{color:#bb0f05;text-decoration:none;outline:none;}
.clear { clear: both; }
a.AlexaSiteStatsWidget{float:left;padding:10px;background: white;margin:4px 0 0 10px;}
a:hover.AlexaSiteStatsWidget{float:left;padding:10px;background: #333;margin:4px 0 0 10px;}
.demo{float:left;width:630px;margin:10px 0 20px 20px;}
.demo ul{float:left;width:630px;margin:5px 0 0 4px;display:block;}
.demo li{float:left;padding:0;margin:0;color:white;}
.demo {float:left;color:white;}
.demo a{float:left;margin:10px 39px 0 0;padding:0;background: url(pirobox/bg_thumbs.png);width:118px;height:118px;}
.demo  a:hover{float:left;background: url(piroboxbg_thumbs_h.png);padding:0;}
.demo p{float:left;padding:5px;}
.box_left pre{float:left;width:630px;background:#000;color:#fff;}
.demo  a img{float:left;margin:9px 0 0 9px;}
ul.spiegazioni{float:left;margin:20px 0 0 10px;font-size:14px;}
.spiegazioni li{float:left;width:95%;background:url(piroboxquestion.png) left center no-repeat;background-position:0 5px;margin:5px 0 2px 0;padding:6px 0 6px 22px;border-bottom:1px dotted #666;cursor:help;color:#999;}
.spiegazioni li ul {width:600px;}
.spiegazioni li ul li{float:left;width:91%;background:url(piroboxinfo.png) left center no-repeat;background-position:0 5px;margin:5px 0 5px 0;padding:3px 0 3px 18px;border-bottom:1px dotted #222;cursor:help;color:#999;}
#footer{position:absolute;width:1010px;height:62px;background: url(piroboxfooter.png) center bottom no-repeat;padding:0 0 0 0;z-index:6;}
.span_f_c {color:#bb0f05;}
.span_f_white {color:#fff;}
/*:::::::::::::: FINE MENU :::::::::::*/
.footer{float:left;width:880px;margin:0 0 0 60px;padding:20px 0 10px 0;color:white;text-align:center;background: url(piroboxfooter_down.png) top repeat-x;}
/*:::::::FINE CSS::::::*/
/*Default CSS for pan containers*/
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="pirobox/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="pirobox/pirobox_extended.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
</head>
<body>
<h2 class="my_title">PIROBOX</h2>
<p><a href="pirobox2.zip" style="font-size:160%;color:red">photo + Javascript в архиве</a></p>
<h2 class="my_title"><a href="https://player.vimeo.com/video/21504557" class="pirobox_gall1" rel="iframe-900-350" title="Intro">><span class="span_f_c">Vimeo </span><b style="font-size:12px;"> Open </b><span style="font-size:10px;">(900x350px)</span></a></h2>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

HTML ↴

размер Kb

ПРИМЕР ↴ (лучше см. по линку в полном окне)

✔ пример в полном окне