반응형
모달의 부트스트랩 3 및 유튜브
저는 제 유튜브 영상을 보여주기 위해 부트스트랩 3의 모달 기능을 사용하려고 합니다.작동은 되는데 유튜브 영상에서 버튼을 클릭할 수가 없어요.
도와드릴까요?
내 코드는 다음과 같습니다.
<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&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
저는 이 문제(또는 https://github.com/twbs/bootstrap/issues/10489) 에서 CSS3 변환(변환)과 관련하여 발견하고 설명한 문제)를 발견했습니다..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 {
}
저는 이 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">×</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
JQuery 기능:
//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 유튜브 비디오 강제 적용
iframe의 소스 속성에 다음과 같이 ?html5=1을 추가하면 됩니다.
<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>
부트스트랩 5(부트스트랩 문서에서 액세스하는 판독기용)
이것은 오래된 부트스트랩 3 질문이지만 재생을 제어하는 주소를 지정하는 답을 찾지 못했습니다.
부트스트랩 문서에 명시된 바와 같이, 이 질문은 "재생 등을 자동으로 중지하려면 부트스트랩에 없는 추가 자바스크립트가 필요하다"는 문제를 해결하기 위해 참조됩니다.
유튜브 비디오는 당신이 사용하는 한 부트스트랩 모달에서 예상대로 작동할 것입니다.iframe신에대 videoCORS 오류를 방지하는 요소입니다.하지만,iframe다과같비관속없련습성니다이디오은음과 같은 .autoplay, loop, etc..., 만 사용할 수 있습니다.예를 들어, 당신은 할 수 없습니다.autostart열릴 (더) 달이열때비오디 (YT API에서는 autostart=1)
YouTube 비디오 재생을 제어하기 위한 새로운 접근 방식이 여기에 설명되어 있습니다.다음은 부트스트랩 5 모달 내의 비디오 재생에서 구체적으로 작동하는 방법입니다.
모달 마크업
<div class="modal fade" id="dynamicVideoModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="ratio ratio-21x9" id="player">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-dark" id="playBtn">Play</button>
<button type="button" class="btn-dark" id="pauseBtn">Pause</button>
</div>
</div>
</div>
</div>
자바스크립트
var player
function onYouTubeIframeAPIReady() {
console.log('onYouTubeIframeAPIReady...')
player = new YT.Player('player', {
videoId: 'M7lc1UVf-VE', // YT video source
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
})
}
function onPlayerReady(event) {
event.target.playVideo() // autostart
}
function onPlayerStateChange(event) {
// do other custom stuff here by watching the YT.PlayerState
}
function loadYouTubeVideo() {
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var myModalEl = document.getElementById('dynamicVideoModal')
myModalEl.addEventListener('show.bs.modal', function (event) {
// dynamically create video when modal is opened
loadYouTubeVideo()
})
// optional hooks for controls outside YT
var playBtn = document.getElementById('playBtn')
playBtn.addEventListener('click', function (event) {
console.log('play')
player.playVideo()
})
var pauseBtn = document.getElementById('pauseBtn')
pauseBtn.addEventListener('click', function (event) {
console.log('pause')
player.pauseVideo()
})
Update re: "모달 창을 닫을 때 비디오가 계속 재생되는 것이 문제입니다."이것은 OP 질문의 범위를 벗어나지만, 당신은 단순히 모달에 연결할 수 있습니다.hidden이벤트를 수행하고 YT 플레이어의 해당 인스턴스에서 .stop()을 실행합니다.예:
dynamicVideoModal.addEventListener('hidden.bs.modal', event => {
player.stopVideo()
})
부트스트랩 5용
여기서 나는 나에게 효과가 있었던 것을 공유합니다.
트리거 버튼
<button data-bs-toggle="modal" data-tagVideo="https://www.youtube.com/embed/zcX7OJ-L8XQ" data-bs-target="#videoModal">Video</button>
모달 구문
<div class="modal fade" id="videoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe src="" allow="autoplay;" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
데이터에서 비디오 가져오기 및 자동 재생 기능
function autoPlayYouTubeModal() {
var triggerOpen = $("body").find('[data-tagVideo]');
triggerOpen.click(function() {
var theModal = $(this).data("bs-target"),
videoSRC = $(this).attr("data-tagVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.btn-close').click(function() {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
}
문서에 있는 함수 호출 준비
<script>
$(document).ready(function() {
autoPlayYouTubeModal();
});
</script>
그리고 여기서 jsfiddle은 처음 실행할 때 일부 Cors 정책이 있을 수 있으므로 새로 고침하고 버튼을 다시 클릭하십시오.
부트스트랩 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">×</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
부트스트랩 CSS를 편집하고 싶지 않거나 위의 모든 것이 전혀 도움이 되지 않는다면(나의 경우처럼) Firefox에서 비디오를 모달로 실행할 수 있는 쉬운 해결책이 있습니다.
"페이드" 클래스를 모달에서 제거하면 "인" 클래스도 열립니다.
$('#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">×</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>
부트스트랩은 즉시 모달 팝업 기능을 제공합니다.
<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&fs=1&rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen=""></iframe>
<p>Your video</p>
</div>
</div>
</div>
</div>음... 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&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
</body>
</html>
당신은 당신의 모달 플레이어의 Z-Index를 스택에서 더 높게 가져올 수 있습니까?
$('#myModal iframe').css("z-index","999");
<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">×</button>
<div>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/myvideocode" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
용사를 $('#introVideo').modal('show');부트스트랩 올바른 트리거링과 충돌합니다.모달을 여는 링크를 클릭하면 페이드 애니메이션이 완료된 후 바로 닫힙니다.제거하기만 하면 됩니다.$('#introVideo').modal('show'); 사용버전 3.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">×</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>user3084135의 답변은 저에게 기본으로 잘 먹혔지만, 다음을 포함해야 했습니다.
- 로컬에서 호스팅되는 비디오의 "video" 태그 및 외부에서 호스팅되는 비디오의 "iframe" 태그
- 모달이 제거되었지만 소스가 제거되었는지 확인합니다.
- 솔루션은 부트스트랩 대응 설계로 작동했습니다.
- 모달 열기 시 모든 비디오 자동 재생
- 다중 모델이 가능합니다.
완성된 솔루션은 다음과 같습니다.
모달 트리거 버튼
<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">
데이터 프레임 속성은 "iframe" 또는 "video" 중 하나로 적합한 태그 유형(외부 비디오의 경우 iframe, 로컬 호스트의 경우 video)을 반영할 수 있습니다.
부트스트랩 응답형 비디오 컨테이너
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>
이 두 가지 모두 표준 부트스트랩 응답 모달 디브 내에 있습니다.
JQuery 스크립트
<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).
저도 같은 문제가 있었습니다 - 방금 폰트-어썸 cdn 링크를 추가했습니다 - 아래 부트스트랩 하나를 설명하면 제 문제가 해결되었습니다.폰트가 여전히 작동했기 때문에 실제로 문제를 해결하지 않았습니다.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
좋아요. 해결책을 찾았어요.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</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>
비디오, 이미지, 페이지를 처리하는 부트스트랩 4의 경우...
$('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">×</span></button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>최신 부트스트랩 4.5+ 사용
- HTML 페이지에서 다른 Youtube URL을 전달하여 동일한 모달 반복 사용
- 훌륭한 재생 버튼 아이콘과 자동 재생이 활성화된 경우
- 코드를 복사하기만 하면 모든 것이 설정됩니다!!!
- Codepen에서 솔루션 보기
// javascript using jQuery - can embed in the script tag
$(".video-link").click(function () {
var theModal = $(this).data("target");
videoSRC = $(this).attr("data-video");
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});#video-section .modal-content {
min-width: 600px;
}
#video-section .modal-content iframe {
width: 560px;
height: 315px;
}<!-- HTML with Bootstrap 4.5 and Fontawesome -->
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<section id="video-section" class="py-5 text-center text-white">
<div class="container h-100 d-flex justify-content-center">
<div class="row align-self-center">
<div class="col">
<div class="card bg-dark border-0 mb-2 text-white">
<div class="card-body">
<a href="#" class="btn btn-primary bg-dark stretched-link video-link" data-video="https://www.youtube.com/embed/HnwsG9a5riA" data-toggle="modal" data-target="#video-modal">
<i class="fas fa-play fa-3x"></i>
</a>
<h1 class="card-title">Play Video</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Video Modal -->
<div class="modal fade" id="video-modal" tabindex="-1" role="dialog">
<div class="modal-dialog h-100 d-flex align-items-center">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<iframe frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
[1]: https://codepen.io/richierich25/pen/yLOOYBL
$('#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">×</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>언급URL : https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal
반응형
'programing' 카테고리의 다른 글
| python의 __init_ 상속 및 재정의 (0) | 2023.09.04 |
|---|---|
| 쿼리에서 연속 제한 및 오프셋이 잘못 배치되었습니다. (0) | 2023.09.04 |
| 왜 악의적인 사이트는 공격하기 전에 GET를 통해 CSRF 토큰을 얻을 수 없습니까? (0) | 2023.09.04 |
| MariaDB 타임스탬프가 업데이트 날짜가 아닙니다. (0) | 2023.09.04 |
| 키 값을 기반으로 하는 사전의 python 필터 목록 (0) | 2023.09.04 |