Question

我正在尝试使用嵌入的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>&times;</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 &copy; <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);
    });
  });
});

Answer 1

我通过更改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 &copy; <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;
  }
});

YouTube弹出空模式

1 个答案: