我正在尝试使用嵌入的YouTube视频编写弹出模式,但我的模式为空。我正在使用Bootstrap,并且有两个单独的部分和javascript。 模态出现时为空白。我编码错了吗?
这是我的代码。
$(function() {
// Auto play modal video
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
<!-- REMOTE HELP VIDEO -->
<section id="remote-help-video" class="p-5 text-center">
<div class="row">
<div class="col">
<div class="container p-2">
<a
href="#"
class="video"
data-video="https://www.youtube.com/embed/fRpYMzXXqEU"
data-toggle="modal"
data-target="#videoModal"
>
<i class="fa fa-play"></i>
</a>
<h1>See How Team Viewer Works</h1>
</div>
</div>
</div>
</section>
<!-- VIDEO SECTION MODAL -->
<div class="modal fade" id="videoModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button class="close" data-dismiss="modal"><span>×</span></button>
<iframe src="" height="350" width="100%" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
当这是唯一的功能时,代码有效,但是我的脚本文件中还有其他功能。
完整的JavaScript文件;
$('.slider').slick({
infinite: true,
slideToShow:1,
slideToScroll:1,
autoplay: true,
autoplaySpeed: 4000
});
var mymap = L.map('mapid').setView([36.367, -5.23], 11);
L.marker([36.367, -5.23]).addTo(mymap)
.bindPopup("<center>We are happy to serve:</center> <b>Estepona, San Luis de Sabinillas, Manilva, Guadiaro, Soto Grande</b> and all surrounding areas").openPopup();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicGF1bHNlYWwiLCJhIjoiY2prbXlpZjN5Mjl1YzNzcWh1MGpkYjd0YyJ9.q6m5a0rQF5cfEtn6Lb6H4Q', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
$("form").submit(function(e) {
var error = "";
if ($("#email").val() == "") {
error += "The email field is required.<br>";
}
if ($("#subject").val() == "") {
error += "The Subject field is required.<br>";
}
if ($("#message").val() == "") {
error += "The message field is required.<br>";
}
if (error != "") {
$("#error").html('<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>');
return false;
} else {
return true;
}
});
$(function() {
// Auto play modal video
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
答案 0 :(得分:0)
我通过更改javascript文件的顺序解决了此问题,将模式代码移到了.js的顶部。可能不是最好的做事方式,但它确实有效。
$(function() {
// Auto play modal video
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
$('.slider').slick({
infinite: true,
slideToShow:1,
slideToScroll:1,
autoplay: true,
autoplaySpeed: 4000
});
var mymap = L.map('mapid').setView([36.367, -5.23], 11);
L.marker([36.367, -5.23]).addTo(mymap)
.bindPopup("<center>We are happy to serve:</center> <b>Estepona, San Luis de Sabinillas, Manilva, Guadiaro, Soto Grande</b> and all surrounding areas").openPopup();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicGF1bHNlYWwiLCJhIjoiY2prbXlpZjN5Mjl1YzNzcWh1MGpkYjd0YyJ9.q6m5a0rQF5cfEtn6Lb6H4Q', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
$("form").submit(function(e) {
var error = "";
if ($("#email").val() == "") {
error += "The email field is required.<br>";
}
if ($("#subject").val() == "") {
error += "The Subject field is required.<br>";
}
if ($("#message").val() == "") {
error += "The message field is required.<br>";
}
if (error != "") {
$("#error").html('<div class="alert alert-danger" role="alert"><p><strong>There were error(s) in your form:</strong></p>' + error + '</div>');
return false;
} else {
return true;
}
});