Question

＆＃13;

jQuery(document).ready(function() {
  jQuery('.popup-youtube1, .popup-vimeo, .popup-gmaps').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false
  });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 col-md-3">
  <div class="thumb">
    <a class="popup-youtube1" href="https://www.youtube.com/watch?v=K8E6xsac2MU">
      <img src="../.././images/kalchachani.jpg" class="img-responsive">
      <div class="hover-opaque">
      </div>
      <span class="glyphicon glyphicon-play-circle text-center" aria-hidden="true"></span>
    </a>
  </div>
  <div class="thumb-caption text-center">
    <figcaption><a href="#">Anand Deshpande</a></figcaption>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

＆＃13;

你好，我正在使用大胆的弹出式JQuery插件在弹出窗口中播放Youtube视频。在这里我添加了youtube的单个视频链接。当我点击缩略图时，它会播放与给定网址相关的视频。但是，我想在每次刷新页面时播放不同的视频。

Answer 1

创建一个数组并将视频链接添加到数组然后生成一个随机索引以从数组

获取视频链接

Answer 2

我希望这会有所帮助。 :)

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
</head>

<body>
    <a class="vimeo-video-1" href="#">RANDOM VIMEO VIDEOS</a>
    <br>
    <a class="vimeo-video-2" href="#">RANDOM YOUTUBE VIDEOS</a>
</body>

</html>
<script type="text/javascript">
var num = 3;

//VIMEO
vimeolink = new Array("212731897", "118901221", "211690338");
x = (Math.floor(Math.random() * num));
randomvimeolink = (vimeolink[x]);

//YOUTUBE
youtubelink = new Array("1F_bG-uJMns&start=90", "PjDw3azfZWI&t=31m08s", "PjDw3azfZWI#t=31m08s");
x = (Math.floor(Math.random() * num));
randomyoutubelink = (youtubelink[x]);


//VIMEO MAGNEFICE POPUP
$('.vimeo-video-1').magnificPopup({
    items: [{
        src: 'https://player.vimeo.com/video/' + randomvimeolink,
        type: 'iframe' // this overrides default type
    }],
    gallery: {
        enabled: false
    },
    type: 'image'
});


//YOUTUBE MAGNEFICE POPUP
$('.vimeo-video-2').magnificPopup({
    items: [{
        src: 'http://www.youtube.com/watch?v=' + randomyoutubelink,
        type: 'iframe' // this overrides default type
    }],
    gallery: {
        enabled: false
    },
    type: 'image'
});
</script>

在每页刷新时播放随机视频

2 个答案: