Просмотрщик видео с YouTube на JS
Просмотр видео в окне с Ютуба на своем сайте.
Отлично работает код, но мне нужно поправить скрипт, чтоб я мог загружать видео со своего хостинга: 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> |
Часовой пояс GMT +3, время: 04:47. |