모달의 부트 스트랩 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&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">×</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">×</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>
부트 스트랩 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
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&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");
<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');
부트 스트랩 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">×</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"태그
- 소스가 제거되었지만 모달이 해제되었는지 확인하십시오.
- 이 솔루션은 Bootstrap 반응 형 디자인에서 작동했습니다
- 모달 오픈에서 모든 비디오 자동 재생
- 여러 모달 가능
완성 된 솔루션은 다음과 같습니다.
모달 트리거 버튼
<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"일 수 있습니다 (외부 Vid 용 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).
나는 똑같은 문제를 겪었습니다-폰트 멋진 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>
비디오, 이미지 및 페이지를 처리하는 Bootstrap 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>
$('#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
'IT story' 카테고리의 다른 글
ng-app와 data-ng-app의 차이점은 무엇입니까? (0) | 2020.06.15 |
---|---|
파이썬에서 변수가 사전인지 확인하는 방법? (0) | 2020.06.15 |
html 테이블 : thead vs th (0) | 2020.06.15 |
생성자 함수가 Promise를 반환하도록하는 것은 나쁜 습관입니까? (0) | 2020.06.15 |
데이터베이스와 스키마의 차이점 (0) | 2020.06.15 |