Как получить кнопку воспроизведения для запуска действия воспроизведения видео? - PullRequest
0 голосов
/ 03 октября 2018

На этой странице у меня есть два div-а, div-1 перекрывает другой div-2 http://55 -corinthian-drive.webflow.io / home-video-wip

Div-1 содержит кнопку воспроизведения (и большое изображение и текст), при нажатии кнопки воспроизведения div-1 переключает показ div-2, в котором находится видео Vimeo.Я хочу, чтобы видео начало воспроизводиться после нажатия кнопки, но я не могу заставить его работать.Ниже мой скрипт для удаления div-1, который отлично работает.Я посмотрел на эту идею https://jsfiddle.net/ELHCm/, но не смог заставить ее работать, я пытаюсь $ ("# id"). Vimeo ("play");сейчас.

 <!-- triggering div -->
<div class="video-trigger-wrap">
    <h1 class="header">text to remove on click</h1>   
    <div class="video-trigger"></div>  
</div>

<!-- video -->
<div class="div-block-23 position-vid">
    <div id="w-node-df98048f0945" class="video-4 w-video w-embed">       
        <iframe id="g-vid" src="video-address"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>


<script>
$(document).ready(function(){
    $(".video-trigger").click(function(){
        $(".video-trigger-wrap").toggle();
        $("#player").vimeo("play");

    });
});
</script> 


Also tried the following, as suggested by Charan below, but has not worked.
    <script>
      $(document).ready(function(){
          $(".video-trigger").click(function(e){
             e.preventDefault();
             $(".video-trigger-wrap").toggle();
             $("#g-vid").vimeo("play");       
       }); 

  });

 </script>

1 Ответ

0 голосов
/ 03 октября 2018

Попробуйте событие «при нажатии» вместо события «щелчок», поскольку вы динамически добавляете iframe

$('a').on('click',function(e) {
    e.preventDefault();
  $('#video_container').html('<iframe src="https://player.vimeo.com/video/12345?title=1&amp;byline=1&amp;portrait=1&amp;autoplay=true" width="643" height="360" frameborder="0"></iframe>');

})
...