[jquery] 모달의 부트 스트랩 3 및 유튜브

Bootstrap 3의 모달 기능을 사용하여 YouTube 비디오를 표시하려고합니다. 작동하지만 Youtube 비디오의 버튼을 클릭 할 수 없습니다.

이것에 대한 도움이 필요하십니까?

내 코드는 다음과 같습니다.

<div id="link">My video</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
            </div>
        </div>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
    $('#link').click(function () {
        var src = 'http://www.youtube.com/v/FSi2fJALDyQ&amp;autoplay=1';
        $('#myModal').modal('show');
        $('#myModal iframe').attr('src', src);
    });

    $('#myModal button').click(function () {
        $('#myModal iframe').removeAttr('src');
    });
</script>

답변

클래스의 CSS3 변환 (번역)과 관련된 이 문제 (또는 https://github.com/twbs/bootstrap/issues/10489 에서 발견하고 설명 한 문제)를 발견했습니다 .modal.fade .modal-dialog.

bootstrap.css에는 다음과 같은 줄이 있습니다.

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
          transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}

이 줄을 다음과 같이 바꾸면 영화가 올바르게 표시됩니다 (필자의 경우).

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
       -o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
}

.modal.in .modal-dialog {

}

답변

트리거 (링크)를 클릭 할 때 YouTube 비디오를 자동으로 재생하는이 html / jQuery 동적 YouTube 비디오 모달 스크립트를 조합하면 트리거에도 재생할 링크가 포함됩니다. 스크립트는 기본 부트 스트랩 모달 호출을 찾고 트리거의 데이터와 함께 공유 모달 템플릿을 엽니 다. 아래를 참조하여 귀하의 생각을 알려주십시오. 나는 생각을 듣고 싶습니다 …

HTML 모드 트리거 :

 <a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>

HTML 모드 비디오 템플릿 :

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div>
          <iframe width="100%" height="350" src=""></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

쿼리 기능 :

//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal(){
  var trigger = $("body").find('[data-toggle="modal"]');
  trigger.click(function() {
    var theModal = $(this).data( "target" ),
    videoSRC = $(this).attr( "data-theVideo" ),
    videoSRCauto = videoSRC+"?autoplay=1" ;
    $(theModal+' iframe').attr('src', videoSRCauto);
    $(theModal+' button.close').click(function () {
        $(theModal+' iframe').attr('src', videoSRC);
    });
  });
}

기능 전화 :

$(document).ready(function(){
  autoPlayYouTubeModal();
});

FIDDLE :
http://jsfiddle.net/jeremykenedy/h8daS/1/

답변

당신을위한 팁이 하나 있습니다!

나는 사용할 것이다 :

$('#myModal').on('hidden.bs.modal', function () {
    $('#myModal iframe').removeAttr('src');
})

대신에:

$('#myModal button').click(function () {
    $('#myModal iframe').removeAttr('src');
});

버튼없이 모달을 닫을 수도 있기 때문에이 코드를 사용하면 모달이 숨길 때마다 비디오가 제거됩니다.

답변

다른 스레드에서 이것을 발견했으며 데스크톱 및 모바일에서 훌륭하게 작동합니다. 다른 솔루션에서는 그렇지 않은 것 같습니다. 이 스크립트를 페이지 끝에 추가하십시오.

<!--Script stops video from playing when modal is closed-->
<script>
    $("#myModal").on('hidden.bs.modal', function (e) {
        $("#myModal iframe").attr("src", $("#myModal iframe").attr("src"));
    });
</script>

답변

또 다른 해결책은 다음과 같습니다. HTML5 YouTube 동영상 강제 실행

다음과 같이 iframe의 소스 속성에? html5 = 1을 추가하십시오.

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

답변

부트 스트랩 CSS를 편집하지 않으려는 경우 또는 위의 모든 내용이 도움이되지 않는 경우 (내 경우와 같이) 비디오가 Firefox의 모달로 실행되도록 쉽게 해결할 수 있습니다.

모달에서 “fade”클래스를 제거하고 “in”클래스를 열면됩니다.

$('#myModal').on('shown.bs.modal', function () {
    $('#myModal').removeClass('in');
});

답변

워드 프레스 템플릿에서 해결했습니다.

$videoLink ="http://www.youtube.com/watch?v=yRuVYkA8i1o;".
<?php
    parse_str( parse_url( $videoLink, PHP_URL_QUERY ), $my_array_of_vars );
    $youtube_ID = $my_array_of_vars['v'];
?>
<a class="video" data-toggle="modal" data-target="#myModal" rel="<?php echo $youtube_ID;?>">
    <img src="<?php bloginfo('template_url');?>/assets/img/play.png" />
</a>

<div class="modal fade video-lightbox" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body"></div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
    jQuery(document).ready(function ($) {
        var $midlayer = $('.modal-body');
        $('#myModal').on('show.bs.modal', function (e) {
            var $video = $('a.video');
            var vid = $video.attr('rel');
            var iframe = '<iframe />';
            var url = "//youtube.com/embed/"+vid+"?autoplay=1&autohide=1&modestbranding=1&rel=0&hd=1";
            var width_f = '100%';
            var height_f = 400;
            var frameborder = 0;
            jQuery(iframe, {
                name: 'videoframe',
                id: 'videoframe',
                src: url,
                width:  width_f,
                height: height_f,
                frameborder: 0,
                class: 'youtube-player',
                type: 'text/html',
                allowfullscreen: true
            }).appendTo($midlayer);
        });

        $('#myModal').on('hide.bs.modal', function (e) {
            $('div.modal-body').html('');
        });
    });
</script>