2016-11-17 2 views
0

Hier ist die Website: http://neillieleadershipgroup.com/Avada modal Vimeo Video weiter nach geschlossen spielen wird

Auf der Homepage finden Sie eine Video-Play-Taste sehen. Klicken Sie darauf, um ein modales Fenster zu öffnen, das das Video enthält. Video ist nicht auf automatische Wiedergabe eingestellt. Wenn Sie das modale Fenster schließen, wird der Ton vom Video wiedergegeben.

Ich habe Stunden damit verbracht, dies zu erforschen, und ich habe versucht, zahlreiche "Bootstrap" Modal Video-Javascript-Codes auf die Kopf- und Fußzeile hinzufügen, und nichts hat bisher funktioniert.

Ich weiß nicht viel über Javascript/Jquery, aber ich kenne eine anständige Menge über HTML und CSS. Ich habe die Site-Quelle durchsucht, aber ich kann die Technologie hinter diesem Modal nicht finden, d. H., Ob es Bootstrap oder etwas anderes verwendet - mit anderen Worten, ich kann das Skript, das das Modal steuert, nicht finden.

Dies ist ein Artikel habe ich schon gelesen und versucht, ohne Erfolg:
Play and stop Vimeo video placed in Bootstrap modal
Gleiche mit dieser:
Audio from vimeo video continues after modal has closed
Und es gibt viele andere auch, dass keine Hilfe für mich waren.

Hier ist der HTML-Code, der Modal erzeugt:

<div class="fusion-modal modal fade modal-1 homepage-video in" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="false" id="homepage-video" style="display: block;"> 
<div class="modal-dialog modal-lg"> 
    <div class="modal-content fusion-modal-content" style="background-color:#f6f6f6"> 
    <div class="modal-header"> 
    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 class="modal-title" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="28" data-lineheight="36"></h3> 
    </div> 
    <div class="modal-body"> 
    <iframe src="https://player.vimeo.com/video/151703999?title=0&amp;byline=0&amp;portrait=0&amp;api=1&amp;player_id=player_1&amp;wmode=opaque" width="710" height="399" frameborder="0" allowfullscreen="allowfullscreen" id="player_1"></iframe> 
    </div> 
    </div> 
    </div> 
</div> 

Auch wenn ich die JS für die modalen finden könnte, würde ich das auch schaffen.

Hier ist der jüngste jquery Ich habe versucht (Wiedergabe von Video auf modal Nähe zu stoppen), die nicht (beide hinzugefügt Kopf- und Fußzeile) funktionierte:

videoSRC = $('iframe#player_1').attr('src'); 
    $('button.close').click(function() { 
    $(' iframe#player_1').attr('src', videoSRC); 
    }); 

    $('.homepage-video').on('hidden.bs.modal', function (e) { 
    $(' iframe#player_1').attr('src', videoSRC); 
    }); 


Jede Hilfe sehr geschätzt wird. Vielen Dank!

Antwort

1

Sie können das einfach mit Vimeo JS API tun. Download und Upload player.js von diesem Link zu Ihrem Wordpress-Theme-Ordner: https://github.com/vimeo/player.js/blob/master/dist/player.min.js

Nach dem Hochladen Sie die Veranstaltung wie diese mit Jquery abfeuern können: -.

jQuery(document).ready(function($) { 

    var jqueryPlayer = new Vimeo.Player($('iframe#player_1')); 

    $('.homepage-video').on('hidden.bs.modal', function (e) { 
     jqueryPlayer.pause(); 
    }); 

}); 

Es wird Ihr Problem lösen (y)

+0

Ich habe dies zu meiner Header-Datei hinzugefügt: ... und dann Ihren Code zu meiner Fußzeile hinzugefügt. Und es hat funktioniert! Vielen Dank! – chriscreation

Verwandte Themen