Bootstrap 3 i Youtube w modalu
Próbuję użyć funkcji modalnej z Bootstrap 3, aby pokazać mój film na Youtube. Działa, ale nie mogę kliknąć żadnych przycisków w filmie na Youtube.
Jakaś pomoc?Oto Mój kod:
<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>
15 answers
I found this problem (or the problem I found and described at https://github.com/twbs/bootstrap/issues/10489 ) związane z transformacją (translacją) CSS3 na klasie .modal.fade .modal-dialog
.
W bootstrap.css znajdziesz linie pokazane poniżej:
.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);
}
Zastąpienie tych linii poniższymi wyświetli film poprawnie (w moim przypadku):
.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 {
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-31 14:56:34
Złożyłem ten html / jquery dynamiczny skrypt modalny YouTube video, który automatycznie odtwarza wideo YouTube po kliknięciu wyzwalacza (łącza), WYZWALACZ zawiera również link do odtwarzania. Skrypt znajdzie natywne wywołanie modalne bootstrap i otworzy współdzielony szablon modalny z danymi z wyzwalacza. Zobacz poniżej i daj mi znać, co myślisz. Chciałbym usłyszeć myśli...
HTML MODAL TRIGGER:
<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s" >VIDEO</a>
HTML MODAL VIDEO TEMPLATE:
<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 Funkcja:
//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);
});
});
}
WYWOŁANIE FUNKCJI:
$(document).ready(function(){
autoPlayYouTubeModal();
});
The FIDDLE: http://jsfiddle.net/jeremykenedy/h8daS/1/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-13 11:03:43
Mam dla ciebie jedną wskazówkę!
Użyłbym:
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal iframe').removeAttr('src');
})
Zamiast:
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
Ponieważ możesz również zamknąć modal bez przycisku, więc tam z tym kodem usunie film za każdym razem, gdy modal się ukryje.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-02 13:44:47
Oto inne rozwiązanie: Force HTML5 youtube video
Po prostu dodać ?html5=1 do atrybutu źródłowego na ramce iframe, tak:
<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:27
Znalazłem to w innym wątku i działa świetnie na komputerach stacjonarnych i mobilnych-co jest czymś, co nie wydawało się prawdą w niektórych innych rozwiązaniach. Dodaj ten skrypt na końcu swojej strony:
<!--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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-09 20:17:43
Jeśli nie chcesz edytować Bootstrap CSS lub wszystkie powyższe nie pomagają w ogóle (jak w moim przypadku), jest Łatwa poprawka, aby film działał w trybie modalnym w Firefoksie.
Wystarczy usunąć klasę "fade" z modalu i jak otworzy klasę " in " to też:
$('#myModal').on('shown.bs.modal', function () {
$('#myModal').removeClass('in');
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-18 19:59:01
Rozwiązałem to na szablonie wordpress:
$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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-02 10:42:28
Bootstrap zapewnia modalne wyskakujące okienka po wyjęciu z pudełka.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-09 09:37:11
MMhh... Czy możesz opublikować cały dokument HTML i jakiej przeglądarki / wersji używasz?
Odtworzyłem Twoją stronę i przetestowałem w 3 przeglądarkach (Chrome, FF, IE8). Udało mi się zatrzymać i uruchomić niesamowitą przyczepę WDS4 bez żadnych problemów. Oto Mój kod:
<!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>
Mógłbyś spróbować podnieść Indeks z twojego odtwarzacza modalnego w stosie?
$('#myModal iframe').css("z-index","999");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-04 20:20:13
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-22 08:23:10
Użycie $('#introVideo').modal('show');
koliduje z prawidłowym wyzwalaniem bootstrap. Po kliknięciu łącza otwierającego modal zostanie on zamknięty zaraz po zakończeniu animacji zanikania.
Po prostu usuń $('#introVideo').modal('show');
(using bootstrap v3. 3. 2)
Oto Mój kod:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-19 10:32:01
Odpowiedź User3084135 zadziałała dobrze jako baza dla mnie, ale musiałem też włączyć:
-
[7]} tag "wideo" dla lokalnie hostowanego wideo, a także tag "iframe" dla zewnętrznie hostowanego wideo
- upewnij się, że źródło zostało usunięte, jednak modal został odrzucony Rozwiązanie działało w responsywnym projekcie Bootstrap]}
- wszystkie filmy auto-play na modal open
- możliwe jest wiele modali
Moje gotowe rozwiązanie wygląda jak to:
PRZYCISK WYZWALACZA MODALNEGO
<a href="#" class="portfolio-link" data-toggle="modal" data-frame="iframe" data-target="#portfolioModal1" data-theVideo="http://www.youtube.com/embed/xxxxxxxx">
Atrybutem ramki danych może być "iframe" lub "video", aby odzwierciedlić odpowiedni typ znacznika: iframe dla zewnętrznych vidów, video dla lokalnie hostowanych.
KONTENERY WIDEO REAGUJĄCE NA BOOTSTRAP
IFrame:
<div align="center" class="embed-responsive embed-responsive-16by9">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
Video:
<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>
Oba znajdują się w standardowych modalnych div reagujących na Bootstrap.
JQUERY SCRIPT
<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>
Ponieważ autoplay działa inaczej z iframe i tagami wideo, a tryb warunkowy jest używany do obsługi każdego z nich. Aby umożliwić wiele modów, do ich identyfikacji służy selektor wieloznaczny (w moim przypadku 1-6).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-05 21:03:34
Miałem ten sam problem - właśnie dodałem czcionkę-niesamowite linki cdn-komentując bootstrap jeden poniżej rozwiązał mój problem.. naprawdę nie rozwiązałem problemu, ponieważ czcionka awesome nadal działała -
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-26 10:41:56
Ok. Znalazłem rozwiązanie.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-11 11:11:05
$('#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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-11 14:02:43