Вопрос? Трейлер в модальном окне

Tolstyak87 · 23 май 2019

Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Код:
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Код:
    $('body').on('click','.js-trailer',function(){
        var meta = $(this),
            metaS = meta.data('src'),
            metaT = meta.attr('title');
        $('body').append('<div id="trailer-box" class="video-box" title="'+metaT+'"></div>');
            $.ajax({
                url: metaS,
                beforeSend: function() {
                    ShowLoading('');
                },          
                success: function(data) {
                   $("#trailer-box").append($('#trailer-place', data).html());
                   $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                    $("#trailer-box").dialog({
                        modal: true,
                        show: 'fade',
                        hide: 'fade',
                        width: 800,
                        close: function( event, ui ) {$(this).dialog('destroy').remove()}
                    });
                    HideLoading('');
                },
                  error: function() {            
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
    });
Тук, как я понял, работает на HTML5 плеере из коробки, а нужные библиотеки не подключаются.
Как сделать так, чтоб бралась ссылка из допполя и плеер выводился через iframe?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Код:
$("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
На это
Код:
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...

igrovik · 23 май 2019

Tolstyak87 сказал(а): ↑
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Код:
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Код:
    $('body').on('click','.js-trailer',function(){
        var meta = $(this),
            metaS = meta.data('src'),
            metaT = meta.attr('title');
        $('body').append('<div id="trailer-box" class="video-box" title="'+metaT+'"></div>');
            $.ajax({
                url: metaS,
                beforeSend: function() {
                    ShowLoading('');
                },         
                success: function(data) {
                   $("#trailer-box").append($('#trailer-place', data).html());
                   $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                    $("#trailer-box").dialog({
                        modal: true,
                        show: 'fade',
                        hide: 'fade',
                        width: 800,
                        close: function( event, ui ) {$(this).dialog('destroy').remove()}
                    });
                    HideLoading('');
                },
                  error: function() {           
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
    });
Тук, как я понял, работает на HTML5 плеере из коробки, а нужные библиотеки не подключаются.
Как сделать так, чтоб бралась ссылка из допполя и плеер выводился через iframe?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Код:
$("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
На это
Код:
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
Нажмите, чтобы раскрыть...
js код где находится в shortstory или в js ?

Tolstyak87 · 23 май 2019

igrovik js находится в libs.js

salomonkayn · 23 май 2019

Tolstyak87 сказал(а): ↑
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Код:
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Код:
    $('body').on('click','.js-trailer',function(){
        var meta = $(this),
            metaS = meta.data('src'),
            metaT = meta.attr('title');
        $('body').append('<div id="trailer-box" class="video-box" title="'+metaT+'"></div>');
            $.ajax({
                url: metaS,
                beforeSend: function() {
                    ShowLoading('');
                },         
                success: function(data) {
                   $("#trailer-box").append($('#trailer-place', data).html());
                   $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                    $("#trailer-box").dialog({
                        modal: true,
                        show: 'fade',
                        hide: 'fade',
                        width: 800,
                        close: function( event, ui ) {$(this).dialog('destroy').remove()}
                    });
                    HideLoading('');
                },
                  error: function() {           
                    HideLoading('');
                    alert('что-то пошло не так');
                  }
            });
    });
Тук, как я понял, работает на HTML5 плеере из коробки, а нужные библиотеки не подключаются.
Как сделать так, чтоб бралась ссылка из допполя и плеер выводился через iframe?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Код:
$("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
На это
Код:
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
Нажмите, чтобы раскрыть...
В полной новости прописан id - #trailer-place, там где хранится трейлер?

ArtAlf · 23 май 2019

Модальное окно может вообще не поддерживать определенные теги и так же плеер

Tolstyak87 · 23 май 2019

salomonkayn в полной новости без хештега, вот так

Код:

            <div class="fplayer video-box tabs-b" data-tab="tab-2" id="trailer-place">
            <iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>
             <!-- Трейлер -->   
            </div>

Tolstyak87 · 23 май 2019

ArtAlf может-не может, все может, ни один сайт видил с подобной реализацией, а даже с таким шабом, как у меня...

igrovik · 23 май 2019

Tolstyak87 сказал(а): ↑

ArtAlf может-не может, все может, ни один сайт видил с подобной реализацией, а даже с таким шабом, как у меня...
Нажмите, чтобы раскрыть...

Попробуйте поместить js код в shortstory и посмотрите результат. Насколько помню в файлах js доп поля не обрабатываются, их нужно как-то силой туда передавать, например ajax-ом .

salomonkayn · 23 май 2019

Пробуй

HTML

Код:

<div class="movie-trailer showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}"><span class="far fa-play"></span></div>

JS

Код:

$('body').on('click','.showTrailer',function(){
   
        $('body').append('<div class="trailer_frame"><div class="iframe" id="trailer-box"></div><div class="overlay"></div> <span class="icon-close far fa-times"></span></div>');
       
        var w = $(window).width()-40;
        var meta = $(this);
        if( $('.trailer_frame').width() > w ) {
            $('.trailer_frame').height(w/($('.trailer_frame').width()/$('.trailer_frame').height())).width(w).css({'margin-left': 0-w/2});
        }
       
        $('.trailer_frame').animate({opacity: 1, top: $(window).height()/2-$('.trailer_frame').height()/2}, 'slow', function() {

                    metaS = meta.data('src'),
                    $.ajax({
                        url: metaS,
                        beforeSend: function() {
                            ShowLoading('');
                        },             
                        success: function(data) {
                           $("#trailer-box").append($('#trailer-place', data).html());
                           $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                            HideLoading('');
                        },
                          error: function() {               
                            HideLoading('');
                            alert('Что-то пошло не так');
                          }
                    });
                   
        });
       
    });
    $('body').on('click', '.trailer_frame .icon-close, .trailer_frame .overlay', function() {
        $(this).parent().find('iframe').remove();
        $('.trailer_frame').animate({opacity: 0, top: 0}, function() {
            $(this).remove();
        });
       
    });

CSS

Код:

.iframe {
    width: 100%;
    height: 100%;
}

.trailer_frame {
    width: 700px;
    height: 394px;
    margin-left: -350px;
}

.trailer_frame {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 999;
    opacity: 0;
}

.trailer_frame .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
}

.trailer_frame .far {
    right: -20px;
    position: absolute;
    top: -20px;
    background-color: #1d1c21;
    padding: 14px 17px;
    color: #6d2bd6;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1;
}

.iframe {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    background: #1d1c21;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.2);
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    z-index: 1;
}

.trailer_frame iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.trailer_frame .icon-close:hover {
    fill: #eee;
}

salomonkayn · 23 май 2019

Tolstyak87 сказал(а): ↑

igrovik js находится в libs.js
Нажмите, чтобы раскрыть...

В твоем случае в HTML
добавь
data-src="{full-link}"
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" data-src="{full-link}"><span class="icon ion-md-play"></span></div>

Tolstyak87 · 23 май 2019

salomonkayn сказал(а): ↑

В твоем случае в HTML
добавь
data-src="{full-link}"
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" data-src="{full-link}"><span class="icon ion-md-play"></span></div>
Нажмите, чтобы раскрыть...

Этот способ все решил, достаточно было вставить {full-link}

ArtAlf · 25 май 2019

Tolstyak87 сказал(а): ↑

ArtAlf может-не может, все может, ни один сайт видил с подобной реализацией, а даже с таким шабом, как у меня...
Нажмите, чтобы раскрыть...

Просто у меня модальное не поддерживает вообще кроме текста ничего

А что за шаблон где есть такое модальное?

Tolstyak87 · 25 май 2019

В шаблоне плэйфилм к примеру.
ДЛЕ поддерживает модальные окна. У тебя все обстоит в рабочем js и стилях. Код js, который в стартпосто, рабочий, там же и строчка, для вставки в шортстори.
Если хочешь, завтра вечером буду дома, покопаюсь, поищу стили, попробуешь у себя.

ArtAlf · 25 май 2019

Tolstyak87 сказал(а): ↑

В шаблоне плэйфилм к примеру.
ДЛЕ поддерживает модальные окна. У тебя все обстоит в рабочем js и стилях. Код js, который в стартпосто, рабочий, там же и строчка, для вставки в шортстори.
Если хочешь, завтра вечером буду дома, покопаюсь, поищу стили, попробуешь у себя.
Нажмите, чтобы раскрыть...

Да у меня модуль стоит попап, в нем поддержка только текста и full link

Tolstyak87 · 25 май 2019

ArtAlf ну, а у меня без модуля все пашет.

ddro3doff · 6 май 2020

salomonkayn сказал(а): ↑

Пробуй

HTML

Код:

<div class="movie-trailer showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}"><span class="far fa-play"></span></div>

JS

Код:

$('body').on('click','.showTrailer',function(){
  
        $('body').append('<div class="trailer_frame"><div class="iframe" id="trailer-box"></div><div class="overlay"></div> <span class="icon-close far fa-times"></span></div>');
      
        var w = $(window).width()-40;
        var meta = $(this);
        if( $('.trailer_frame').width() > w ) {
            $('.trailer_frame').height(w/($('.trailer_frame').width()/$('.trailer_frame').height())).width(w).css({'margin-left': 0-w/2});
        }
      
        $('.trailer_frame').animate({opacity: 1, top: $(window).height()/2-$('.trailer_frame').height()/2}, 'slow', function() {

                    metaS = meta.data('src'),
                    $.ajax({
                        url: metaS,
                        beforeSend: function() {
                            ShowLoading('');
                        },            
                        success: function(data) {
                           $("#trailer-box").append($('#trailer-place', data).html());
                           $("#trailer-box").append('<script type="text/javascript" src="/engine/classes/html5player/player.js"></script><link media="screen" href="/engine/classes/html5player/player.css" type="text/css" rel="stylesheet" />');
                            HideLoading('');
                        },
                          error: function() {              
                            HideLoading('');
                            alert('Что-то пошло не так');
                          }
                    });
                  
        });
      
    });
    $('body').on('click', '.trailer_frame .icon-close, .trailer_frame .overlay', function() {
        $(this).parent().find('iframe').remove();
        $('.trailer_frame').animate({opacity: 0, top: 0}, function() {
            $(this).remove();
        });
      
    });

CSS

Код:

.iframe {
    width: 100%;
    height: 100%;
}

.trailer_frame {
    width: 700px;
    height: 394px;
    margin-left: -350px;
}

.trailer_frame {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 999;
    opacity: 0;
}

.trailer_frame .overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
}

.trailer_frame .far {
    right: -20px;
    position: absolute;
    top: -20px;
    background-color: #1d1c21;
    padding: 14px 17px;
    color: #6d2bd6;
    border-radius: 100px;
    cursor: pointer;
    z-index: 1;
}

.iframe {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    background: #1d1c21;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.2);
    box-shadow: 0 0 20px rgba(0,0,0,.2);
    z-index: 1;
}

.trailer_frame iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.trailer_frame .icon-close:hover {
    fill: #eee;
}

Нажмите, чтобы раскрыть...

Как заставить работать этот код в fullstory.tpl ? Выводит модальное окно без плеера. Хотя в исходном код код плеера есть

Diesellboy · 6 май 2020

Ссылку копируй через iframe

ddro3doff · 6 май 2020

Diesellboy сказал(а): ↑

Ссылку копируй через iframe
Нажмите, чтобы раскрыть...

Можно на примере кода показать ? я в js не селен

Diesellboy · 6 май 2020

Может неправильно понял но так видео должно работать если в доп поле ссылка будет такая:
View: https://www.youtube.com/embed/7-0etDF6FBI

ddro3doff · 6 май 2020

Diesellboy сказал(а): ↑

Может неправильно понял но так видео должно работать если в доп поле ссылка будет такая:
View: https://www.youtube.com/embed/7-0etDF6FBI
Нажмите, чтобы раскрыть...

В шот стори этот же код отрабатывает нормально
При нажатии на
<div class="movie-trailer showTrailer" title="Смотреть трейлер {title}" data-src="{full-link}"><span class="far fa-play"></span></div>
Выводит модальное окно с плеером
в фул стори просто модальное окно

ZeroCoolPro.Biz

Вопрос? Трейлер в модальном окне

Tolstyak87 Бывалый

Вложения:

Безымянный.png

igrovik Местный

Tolstyak87 Бывалый

salomonkayn
Забанен

ArtAlf Посетитель

Tolstyak87 Бывалый

Tolstyak87 Бывалый

igrovik Местный

salomonkayn
Забанен

salomonkayn
Забанен

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ddro3doff Зелёный

Вложения:

2e907f8354.jpg

Diesellboy Бывалый

ddro3doff Зелёный

Diesellboy Бывалый

ddro3doff Зелёный

[dle] любая ссылка открывается в новом окне

2 плеера и 1 трейлер

Видео в модальном окне

Вопрос? Закладки пользователя в модальном окне dle 13.2

Быстрый поиск

Вопрос? Трейлер в модальном окне

Tolstyak87 Бывалый

Вложения:

Безымянный.png

igrovik Местный

Tolstyak87 Бывалый

salomonkayn Забанен

ArtAlf Посетитель

Tolstyak87 Бывалый

Tolstyak87 Бывалый

igrovik Местный

salomonkayn Забанен

salomonkayn Забанен

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ddro3doff Зелёный

Вложения:

2e907f8354.jpg

Diesellboy Бывалый

ddro3doff Зелёный

Diesellboy Бывалый

ddro3doff Зелёный

[dle] любая ссылка открывается в новом окне

2 плеера и 1 трейлер

Видео в модальном окне

Вопрос? Закладки пользователя в модальном окне dle 13.2

Быстрый поиск

Быстрый поиск

salomonkayn
Забанен

salomonkayn
Забанен

salomonkayn
Забанен