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


157

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>

답변:


107

클래스의 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 {

}

4
이것은 정답이 아니어야합니다. 소스 CSS 파일을 편집해서는 안됩니다.
emix

38

트리거 (링크)를 클릭 할 때 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/


8
이렇게하면 모달을 열 때마다 이벤트가 닫기 버튼에 바인딩되며 hidden.bs.modal, 사용자가 모달을 닫기 위해 다른 작업을 수행 할 수 있기 때문에 비디오를 끄는 수단으로 이벤트를 사용해야합니다 (예 : 외부 클릭).
Ian Clark

자동 재생은 Youtube API 용어에 위배됩니다. 방금 Android 앱 마켓 플레이스에서 웹뷰를 사용하여 앱이 거부되었습니다.
giorgio79

앱에 다른 문제가있는 것 같습니다. 다음은 YouTube 설명서입니다. developers.google.com/youtube/player_parameters support.google.com/youtube/answer/…
jeremykenedy

1
+1 부트 스트랩 자체가 귀하의 답변을 언급 한 것 같습니다 : getbootstrap.com/docs/4.3/components/modal/…
PhilMarc

19

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

나는 사용할 것이다 :

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

대신에:

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

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


언뜻보기에는 작동하지만이 모달을 다시 열려면 어떻게해야합니까? 삭제했기 때문에 할 수 없습니다'src'
kanlukasz

17

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

<!--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>   

이 코드는 저에게 효과적입니다. 간단하고 효율적입니다! 감사합니다!
Raimundo Baravaglio


4

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

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

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

4

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

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

4

부트 스트랩 4를 사용해보십시오

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h2>Embedding YouTube Videos</h2>
<p>Embedding YouTube videos in modals requires additional JavaScript/jQuery:</p>

<!-- Buttons -->
<div class="btn-group">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/lQAUq_zs-XU">Launch Video 1</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/pvODsb_-mls">Launch Video 2</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/4m3dymGEN5E">Launch Video 3</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/embed/uyw0VZsO3I0">Launch Video 4</button>
</div>

<!-- Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark border-dark">
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body bg-dark p-0">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<script>
$(document).ready(function() {
    // Set iframe attributes when the show instance method is called
    $("#videoModal").on("show.bs.modal", function(event) {
        let button = $(event.relatedTarget); // Button that triggered the modal
        let url = button.data("video");      // Extract url from data-video attribute
        $(this).find("iframe").attr({
            src : url,
            allow : "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
        });
    });

    // Remove iframe attributes when the modal has finished being hidden from the user
    $("#videoModal").on("hidden.bs.modal", function() {
        $("#videoModal iframe").removeAttr("src allow");
    });
});
</script>

</body>
</html>

방문 : https://parrot-tutorial.com/run_code.php?snippet=bs4_modal_youtube


2

부트 스트랩은 기본적으로 모달 팝업 기능을 제공합니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="btn btn-primary" data-toggle="modal" href="#modal-video"><i class="fa fa-play"></i> watch video</a>
<div class="modal fade" id="modal-video" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">close <i class="fa fa-times"></i></button>
      </div>
      <div class="modal-body">
        <iframe type="text/html" width="640" height="360" src="//www.youtube.com/embed/GShZUiyqEH0?rel=0?wmode=transparent&amp;fs=1&amp;rel=0&amp;enablejsapi=1&amp;version=3" frameborder="0" allowfullscreen=""></iframe>
        <p>Your video</p>
      </div>
    </div>
  </div>
</div>


0

MMhh ... 전체 HTML 문서와 사용중인 브라우저 / 버전을 게시 할 수 있습니까?

귀하의 페이지를 다시 만들고 3 개의 브라우저 (Chrome, FF, IE8)에서 테스트했습니다. 나는 아무런 문제없이 멋진 WDS4 트레일러를 멈추고 시작할 수있었습니다. 내 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <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>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jq.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="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>
  </body>
</html>

스택에서 모달 플레이어의 Z- 색인을 더 높이 가져올 수 있습니까?

$('#myModal iframe').css("z-index","999");


코드를 시도했지만 작동하지 않았습니다. 비디오에서 아무 버튼이나 클릭 할 수 없습니다 (일시 정지, 음량, 품질 등). 내가 YOUTUBE 버튼을 사용할 수 없다는 것을 알고 계셨습니까? Firefox에서보고 있습니다. -어떤 버전의 jquery를 사용하고 있습니까? 1.10.1을 사용하고 있습니다-Bootstrap 3을 사용하고 있습니까?
NitroMedia

내 테스트 계속하기 : Firefox에서 작동하지 않음 Chrome에서 작동 함 Safari에서 작동 함
NitroMedia

그래서 코드를 사용하고 어디서나 테스트하고 Firefox를 제외한 모든 곳에서 작동합니다. Mac에서 버튼을 롤오버하면 색상이 변경되지만 클릭 할 수 없습니다. PC에서 화면이 검은 색으로 유지되고 비디오가 재생됩니다. 이것은 나를 미치게 만들었 어! 안전 모드로 파이어 폭스를 실행하고 캐시를 비우고 아무것도 작동하지 않았습니다.
NitroMedia

나는 같은 문제를 발견했다. 우분투 23.0 용 Firefox의 경우. 그러나 TypeError : Value not an object 오류가 발생했습니다. s.ytimg.com/yts/jsbin/www-embed-player-vflwWlnaY.js(220 행). 크롬에서는 코드가 작동합니다.
베이스 Jobsen

음 .. Mac에서 로컬로 다시 만들었고 비디오 ID를 다운로드하려고합니다. 서버에 푸시하고 로컬 버그인지 확인하겠습니다.
TyMayn

0
<a href="#" class="btn btn-default" id="btnforvideo" data-toggle="modal" data-target="#videoModal">VIDEO</a>

<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="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

0

$('#introVideo').modal('show'); 부트 스트랩 적절한 트리거링과의 충돌 사용 . 모달을 여는 링크를 클릭하면 페이드 애니메이션을 완료 한 직후에 닫힙니다. 그냥 제거$('#introVideo').modal('show'); 부트 스트랩 v3.3.2를 사용하여

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

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>


<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>

<script>
  //JS

$('#videoLink').click(function () {
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
    // $('#introVideo').modal('show'); <-- remove this line
    $('#introVideo iframe').attr('src', src);
});


$('#introVideo button.close').on('hidden.bs.modal', function () {
    $('#introVideo iframe').removeAttr('src');
})
</script>


0

user3084135의 답변은 나를위한 기반으로 잘 작동했지만 다음을 통합해야했습니다.

  1. 로컬 호스팅 비디오의 "video"태그와 외부 호스팅 비디오의 "iframe"태그
  2. 소스가 제거되었지만 모달이 해제되었는지 확인하십시오.
  3. 이 솔루션은 Bootstrap 반응 형 디자인에서 작동했습니다
  4. 모달 오픈에서 모든 비디오 자동 재생
  5. 여러 모달 가능

완성 된 솔루션은 다음과 같습니다.

모달 트리거 버튼

<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">

data-frame 속성은 적절한 태그 유형을 반영하기 위해 "iframe"또는 "video"일 수 있습니다 : 외부 비디오 용 iframe, 로컬 호스팅 비디오.

부트 스트랩 대응 비디오 컨테이너

iFrame :

<div align="center" class="embed-responsive embed-responsive-16by9">
  <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>

비디오:

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video width="640" height="364" controls>
        <source src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>                               
</div>

이들은 표준 Bootstrap 응답 모달 div 내에 있습니다.

쿼리 스크립트

<script>
 $(document).ready(function(){
    function autoPlayModal(){
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function() {
        var theFrame = $(this).data( "frame" );
        var theModal = $(this).data( "target" );
        videoSRC = $(this).attr( "data-theVideo" ); 
        if (theFrame == "iframe") {
          videoSRCauto = videoSRC+"?autoplay=1" ;
        } else {
          videoSRCauto = videoSRC;
          $("[id*=portfolioModal] video").attr('autoplay','true');
        }
        $(theModal+' '+ theFrame).attr('src', videoSRCauto); 
        $("[id*=portfolioModal]").on('hidden.bs.modal', function () {
            $("[id*=portfolioModal] "+ theFrame).removeAttr('src');
        })
      });
    }

  autoPlayModal();
});
</script>

자동 재생은 iframe 및 동영상 태그와 다르게 작동하므로 조건을 사용하여 각 태그를 처리합니다. 여러 모달을 허용하기 위해 와일드 카드 선택기가이를 식별하는 데 사용됩니다 (필자의 경우 portfolioModal1-6).


0

나는 똑같은 문제를 겪었습니다-폰트 멋진 cdn 링크를 추가했습니다-아래의 부트 스트랩을 주석 처리하면 문제가 해결되었습니다.

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

0

확인. 해결책을 찾았습니다.

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h3 class="modal-title" id="modal-login-label">Capital Get It</h3>
                    <p>Log in:</p>
                </div>

                <div class="modal-body">

                    <h4>Youtube stuff</h4>



             <iframe src="//www.youtube.com/embed/lAU0yCDKWb4" allowfullscreen="" frameborder="0" height="315" width="100%"></iframe>       
             </div>


                </div>

            </div>
        </div>
    </div>

0

비디오, 이미지 및 페이지를 처리하는 Bootstrap 4의 경우 ...

http://jsfiddle.net/c4j5pzua/

$('a[data-modal]').on('click',function(){
	var $page = $(this).data('page');
	var $image = $(this).data('image');
	var $video = $(this).data('video');
	var $title = $(this).data('title');
	var $size = $(this).data('size');
	$('#quickview .modal-title').text($title);
	if ($size) { $('#quickview .modal-dialog').addClass('modal-'+$size); }
	if ($image) {
		$('#quickview .modal-body').html('<div class="text-center"><img class="img-fluid" src="'+$image+'" alt="'+$title+'"></div>');
	} else if ($video) {
		$('#quickview .modal-body').html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/'+$video+'?autoplay=1" allowfullscreen></iframe></div>');
	}
	if ($page) {
		$('#quickview .modal-body').load($page,function(){
			$('#quickview').modal({show:true});
		});
	} else {
		$('#quickview').modal({show:true});
	}
	$('#quickview').on('hidden.bs.modal', function(){
		$('#quickview .modal-title').text('');
		$('#quickview .modal-body').html('');
		if ($size) { $('#quickview .modal-dialog').removeClass('modal-'+$size); }
	});
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

<div class="container my-4">

<h3 class="mb-4">Bootstrap 4 Modal YouTube Videos, Images & Pages</h3>

<a href="javascript:;" class="btn btn-primary" data-modal data-video="zpOULjyy-n8" data-title="Video Title" data-size="xl">Video</a>

<a href="javascript:;" class="btn btn-primary" data-modal data-image="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social-logo.png" data-title="Image Title" data-size="">Image</a>

<a href="javascript:;" class="btn btn-primary" data-modal data-page="https://getbootstrap.com" data-title="Page Title" data-size="lg">Page *</a>

<p class="mt-4">* Clicking this will break it, but it'll work using a local page!</p>

</div>

<div class="modal fade" id="quickview" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>


-3

$('#videoLink').click(function () {
    var src = 'https://www.youtube.com/embed/VI04yNch1hU;autoplay=1';
    // $('#introVideo').modal('show'); <-- remove this line
    $('#introVideo iframe').attr('src', src);
});

$('#introVideo button.close').on('hidden.bs.modal', function () {
    $('#introVideo iframe').removeAttr('src');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- triggering Link -->
<a id="videoLink" href="#0" class="video-hp" data-toggle="modal" data-target="#introVideo"><img src="img/someImage.jpg">toggle video</a>

<!-- Intro video -->
<div class="modal fade" id="introVideo" tabindex="-1" role="dialog" aria-labelledby="introductionVideo" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item allowfullscreen"></iframe>
        </div>
      </div>
    </div>
  </div>
</div>


예제가 실행되지 않습니다
Papa De Beau
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.