Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.89/18: Рейтинг темы: голосов - 18, средняя оценка - 4.89
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447

Скрипт для просмотра видео в окне с YouTube на jQuery

10.02.2019, 09:23. Показов 3498. Ответов 2

Студворк — интернет-сервис помощи студентам
При клике на картинку запускается видео с Ютуба в окне поверх страницы.
Данный скрипт работает, но если в коде страницы сверху добавить "<!doctype html>", то страница перестает работать, что можно исправить? Архив прилагаю.
Вложения
Тип файла: zip 1 youtuber.zip (115.9 Кб, 17 просмотров)
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
10.02.2019, 09:23
Ответы с готовыми решениями:

JQuery табы и видео с youtube, как остановить видео при переключении?
Дорогие друзья, нужна очень ваша помощь, ума не приложу как реализовать следующую задачу, есть JQUERY табы, список переключает табы, в...

Зависание намертво во время просмотра видео на youtube
Сегодня впервые столкнулся с проблемой. Смотрел видео на youtube и компьютер завис. Нажимал ctrl+alt+del, alt+f4, ничего не помогло,...

PrestaShop Не работает полноэкранный режим просмотра видео c YouTube на сайте
Столкнулся со следующей проблемой на PrestaShop™ 1.5.6.2. Добавленные youtube-видео в карточки товаров невозможно просматривать в...

2
204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197
10.02.2019, 11:54
может так
Вложения
Тип файла: zip youtuber.zip (40.0 Кб, 11 просмотров)
1
29 / 8 / 3
Регистрация: 22.10.2013
Сообщений: 447
10.02.2019, 12:59  [ТС]
tnfsk, супер, что вы сделали?

Добавлено через 19 минут
Странно, делаю по аналогии, но у меня не работает здесь
блин, пока DNS не обновились(

Добавлено через 17 минут
все разобрался у меня класс был youtuber вместо youTuber

Добавлено через 18 минут
И тогда еще вопрос как сделать, чтоб загружалось, со своего хостинга ролик.
Сейчас по клику переходит на ролик, не в окне открывается. Нужно править скрипт:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
$(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();
        } 
    });
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
10.02.2019, 12:59
Помогаю со студенческими работами здесь

скрипт для загрузки видео на сайт, похожий принцип работы как в контакте и youtube
Здравствуйте. Я работаю над созаднием сайта на Drupal 7. И столкнулся с такой ситуацией, мне нужно написать скрипт для загрузки видео...

Youtube видео открытие по клику в модальном окне
Ни у кого не завалялось наработок или хороших скриптов на примете?

Lightbox Plus ColorBox. При попытке просмотра видео (youtube), окно открывается внизу экрана
Доброго времени суток. У меня такая проблема: поставил плагин Lightbox Plus ColorBox (v2.6), настроил как нужно, но по каким то причинам...

Скрипт по рандомному выбору видео с youtube
Доброго времени суток пользователи, полностью совсем начинающий разбираться в PHP, хочу написать скрипт по рандомному выбору видео с...

Скрипт вывода рандомного видео с YouTube
Ребята, был раньше такой скриптик- &lt;script type=&quot;text/javascript&quot;&gt; $(document).ready(function() { var keys = ; //слова поиска var...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru