Просмотр видео в окне с Ютуба на своем сайте.
Отлично работает код, но мне нужно поправить скрипт, чтоб я мог загружать видео со своего хостинга: sait.ru/video/rolik.mp4
Здесь код скрипта, а ниже всей страницы:
$(document).ready(function()
{
youTuber();
console.log('ddd');
});
function youTuber()
{
$("head").append($("<link>").attr({ type: 'text/css', rel: 'stylesheet', href: 'youtuber/youtuber.css' })); // css
$("body").append($("<div>").attr({ class: 'youTuberBack' })); // bg
$(".youTuberBack").height($(document).height());
var i, id, shortLink, bg = $(".youTuberBack"), wh, ww, video, fw, fh, qw, qh, href;
qw = [3840, 2560, 1920, 1280, 854, 640, 426]; // video sizes
qh = [2160, 1440, 1080, 720, 480, 360, 240];
function sizeVideo() // resize video
{
ww = $(window).width();
for (i=0; i < qw.length; i++)
{
if (ww > qw[i])
{
$("#youTuber").attr({"width": qw[i], "height": qh[i]});
$(video).css({"width": qw[i], "height": qh[i]});
break;
}
}
}
function sizeContainer()
{
if ($(video).is(":visible"))
{
wh = $(window).height();
ww = $(window).width();
fw = $(video).width();
fh = $(video).height();
$(video).css("left", (ww-fw)/2);
$(video).css("top", (wh-fh)/2);
$(bg).css("height", $(document).height());
}
}
function closeContainer()
{
$(bg).html("");
$(bg).fadeOut("fast");
}
$(".youTuber").click(function() // link click
{
href = $(this).attr("href"); // get link
i = href.search(/\/youtu.be/i);
if (i > 0) // youtu.be
{
id = href.match(/(\.be\/)([^&]+)/);
id = id[2];
}
else // youtube.com
{
id = href.match(/(\?|&)v=([^&]+)/);
id = id[2];
}
if (id.length == 0) return false;
$(bg).fadeIn("fast");
$(bg).append($("<div />").attr({ id: 'youTuberLoading'}).text("Загрузка"));
$(bg).append($("<div />").attr({ id: 'youTuberClose'}).html("×"));
$(bg).append($("<div />").attr({ id: 'youTuberContainer' }));
$("#youTuberContainer").append($("<iframe />").attr({ src: 'http://youtube.com/embed/'+id, frameborder: 0, id: 'youTuber', "allowfullscreen": "" }));
video = $("#youTuberContainer");
sizeVideo();
$(video).fadeIn("fast");
sizeContainer();
return false;
});
$(window).resize(function() // resize
{
sizeContainer();
sizeVideo();
});
$(bg).click(function() // bg close
{
closeContainer();
});
$(document).keyup(function(a) // esc btn
{
if ((a.keyCode == 27) && ($(bg).is(":visible"))) {
$(bg).click();
}
});
}
Всей страницы код:
<!DOCTYPE html>
<html>
<head>
<title>Просмотрщик видео с YouTube на JS</title>
<style>
.wrapper { height:100%}
.youTuberBack {
color: #fff !important;
display: none;
z-index: 1100;
opacity: 1;
top: 0;
left: 0;
width: 100%;
position: absolute;
background: #000;
text-align: center;
}
#youTuberContainer {
display: none;
z-index: 1102;
position: fixed;
}
#youTuber {
text-align: center;
box-shadow: 0 0 40px #333;
}
#youTuberLoading {
position: fixed;
z-index: 1101;
font-size: 1.5em;
top: 49%;
width: 5%;
text-align: center;
left: 45%;
}
#youTuberClose {
position: fixed;
right: 15px;
top: 15px;
padding: 3px 13px;
z-index: 1101;
font-size: 25px !important;
text-shadow: 0 0 10px #fff;
border-radius: 3px;
cursor: pointer;
-webkit-transition-duration: 0.1s;
-o-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
transition-duration: 0.1s;
}
#youTuberClose:hover {
background: #333;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function()
{
youTuber();
console.log('ddd');
});
function youTuber()
{
$("head").append($("<link>").attr({ type: 'text/css', rel: 'stylesheet', href: 'youtuber/youtuber.css' })); // css
$("body").append($("<div>").attr({ class: 'youTuberBack' })); // bg
$(".youTuberBack").height($(document).height());
var i, id, shortLink, bg = $(".youTuberBack"), wh, ww, video, fw, fh, qw, qh, href;
qw = [3840, 2560, 1920, 1280, 854, 640, 426]; // video sizes
qh = [2160, 1440, 1080, 720, 480, 360, 240];
function sizeVideo() // resize video
{
ww = $(window).width();
for (i=0; i < qw.length; i++)
{
if (ww > qw[i])
{
$("#youTuber").attr({"width": qw[i], "height": qh[i]});
$(video).css({"width": qw[i], "height": qh[i]});
break;
}
}
}
function sizeContainer()
{
if ($(video).is(":visible"))
{
wh = $(window).height();
ww = $(window).width();
fw = $(video).width();
fh = $(video).height();
$(video).css("left", (ww-fw)/2);
$(video).css("top", (wh-fh)/2);
$(bg).css("height", $(document).height());
}
}
function closeContainer()
{
$(bg).html("");
$(bg).fadeOut("fast");
}
$(".youTuber").click(function() // link click
{
href = $(this).attr("href"); // get link
i = href.search(/\/youtu.be/i);
if (i > 0) // youtu.be
{
id = href.match(/(\.be\/)([^&]+)/);
id = id[2];
}
else // youtube.com
{
id = href.match(/(\?|&)v=([^&]+)/);
id = id[2];
}
if (id.length == 0) return false;
$(bg).fadeIn("fast");
$(bg).append($("<div />").attr({ id: 'youTuberLoading'}).text("Загрузка"));
$(bg).append($("<div />").attr({ id: 'youTuberClose'}).html("×"));
$(bg).append($("<div />").attr({ id: 'youTuberContainer' }));
$("#youTuberContainer").append($("<iframe />").attr({ src: 'http://youtube.com/embed/'+id, frameborder: 0, id: 'youTuber', "allowfullscreen": "" }));
video = $("#youTuberContainer");
sizeVideo();
$(video).fadeIn("fast");
sizeContainer();
return false;
});
$(window).resize(function() // resize
{
sizeContainer();
sizeVideo();
});
$(bg).click(function() // bg close
{
closeContainer();
});
$(document).keyup(function(a) // esc btn
{
if ((a.keyCode == 27) && ($(bg).is(":visible"))) {
$(bg).click();
}
});
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div class="wrapper">
<h1>Скрипт для просмотра видео с YouTube на jQuery</h1>
<hr>
<p>Чтобы просмотреть видео, нажмите на картинку.</p>
<a href="https://youtu.be/GtyR8w6REXE?list=RD3b4cXBtfPh4" class="youTuber">КЛИКАЕМ СЮДА</a>
<hr>
</div>
</body>
</html>
