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

Tolstyak87 · May 23, 2019

Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Code:
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Code:
    $('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?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Code:
$("#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" />');
На это
Code:
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...

igrovik · May 23, 2019

Tolstyak87 said: ↑
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Code:
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Code:
    $('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?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Code:
$("#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" />');
На это
Code:
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
Click to expand...
js код где находится в shortstory или в js ?

Tolstyak87 · May 23, 2019

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

salomonkayn · May 23, 2019

Tolstyak87 said: ↑
Доброго времени суток.
Вопрос вот в чем, уже несколько дней бьюсь над тем, чтоб выводился плеер в модальном окне в шортстори. Само модальное окно появляется, но плеер не выводится.
Это вставлено в шортстори:
Code:
<div class="th-meta th-trl js-trailer" title="Смотреть трейлер" src=""><span class="icon ion-md-play"></span></div>
Вот js модального окна:
Code:
    $('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?
В сети кучу инфы перерыл, но ничего работающего у меня не смог найти.
Заранее благодарю.

Заменил это
Code:
$("#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" />');
На это
Code:
$("#trailer-box").append('<iframe width="560" height="400" src="[xfvalue_trailer_player]" frameborder="0" allowfullscreen></iframe>');
Уже окно плеера сыводится, но не берет ссылку, скрин ниже...
Click to expand...
В полной новости прописан id - #trailer-place, там где хранится трейлер?

ArtAlf · May 23, 2019

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

Tolstyak87 · May 23, 2019

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

Code:

            <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 · May 23, 2019

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

igrovik · May 23, 2019

Tolstyak87 said: ↑

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

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

salomonkayn · May 23, 2019

Пробуй

HTML

Code:

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

JS

Code:

$('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

Code:

.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 · May 23, 2019

Tolstyak87 said: ↑

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

В твоем случае в 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 · May 23, 2019

salomonkayn said: ↑

В твоем случае в 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>
Click to expand...

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

ArtAlf · May 25, 2019

Tolstyak87 said: ↑

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

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

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

Tolstyak87 · May 25, 2019

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

ArtAlf · May 25, 2019

Tolstyak87 said: ↑

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

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

Tolstyak87 · May 25, 2019

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

ddro3doff · May 6, 2020

salomonkayn said: ↑

Пробуй

HTML

Code:

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

JS

Code:

$('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

Code:

.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;
}

Click to expand...

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

Diesellboy · May 6, 2020

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

ddro3doff · May 6, 2020

Diesellboy said: ↑

Ссылку копируй через iframe
Click to expand...

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

Diesellboy · May 6, 2020

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

ddro3doff · May 6, 2020

Diesellboy said: ↑

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

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

ZeroCoolPro.Biz

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

Tolstyak87 Бывалый

Attached Files:

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

igrovik Местный

Tolstyak87 Бывалый

salomonkayn
Забанен

ArtAlf Посетитель

Tolstyak87 Бывалый

Tolstyak87 Бывалый

igrovik Местный

salomonkayn
Забанен

salomonkayn
Забанен

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ddro3doff Зелёный

Attached Files:

2e907f8354.jpg

Diesellboy Бывалый

ddro3doff Зелёный

Diesellboy Бывалый

ddro3doff Зелёный

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

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

Кто скачал файл ? (1.0) - лог скачивающих файлы в модальном окне для dle

Clean sign up 2.0 – регистрация в модальном окне для dle

Useful Searches

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

Tolstyak87 Бывалый

Attached Files:

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

igrovik Местный

Tolstyak87 Бывалый

salomonkayn Забанен

ArtAlf Посетитель

Tolstyak87 Бывалый

Tolstyak87 Бывалый

igrovik Местный

salomonkayn Забанен

salomonkayn Забанен

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ArtAlf Посетитель

Tolstyak87 Бывалый

ddro3doff Зелёный

Attached Files:

2e907f8354.jpg

Diesellboy Бывалый

ddro3doff Зелёный

Diesellboy Бывалый

ddro3doff Зелёный

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

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

Кто скачал файл ? (1.0) - лог скачивающих файлы в модальном окне для dle

Clean sign up 2.0 – регистрация в модальном окне для dle

Useful Searches

Useful Searches

salomonkayn
Забанен

salomonkayn
Забанен

salomonkayn
Забанен