附加 YouTube 嵌入式视频标题答案

【问题标题】：Append YouTube embedded video title附加 YouTube 嵌入式视频标题
【发布时间】：2012-12-29 20:12:44
【问题描述】：

我正在尝试遍历页面中的每个 YouTube 视频（使用 iframe 嵌入方法）并使用 jQuery 附加到每个视频的标题。我的 HTML 看起来像这样：

<div class="video-wrapper">
  <div class="video-container">
    <iframe src="http://www.youtube.com/embed/qzNSsDD_LzE" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="video-wrapper">
  <div class="video-container">
    <iframe src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

jQuery 看起来像这样：

var video = $('.video-container');
video.each(function() {
  var youTuberegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w-]{10,12})/g,
      videoID = youTuberegex.exec($(this).find('iframe').attr('src'))[1];

  $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+videoID+'?v=2&alt=jsonc', function(data){
    var videoTitle = data.data.title;
    video.after('<figcaption>'+videoTitle+'</figcaption>');
  });         
});

所以，我（试图）拍摄每个视频并使用正则表达式来提取 ID。然后我使用视频提要检索标题，并将其附加到video-container。

这是a jsFiddle。如您所见，问题在于每次都附加每个视频的标题。我哪里出错了，这是实现我所追求的有效方法吗？

【问题讨论】：

标签： javascript jquery regex youtube

【解决方案1】：

video 变量指的是匹配选择器“.video-container”的整个对象集，所以当你在做的时候

video.after('<figcaption>'+videoTitle+'</figcaption>');

每个人都这样做。

你需要做的是这样的：

video.each(function() {
  var videoBox = $(this)
  var youTuberegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w-]{10,12})/g,
      videoID = youTuberegex.exec($(this).find('iframe').attr('src'))[1];

  $.getJSON('http://gdata.youtube.com/feeds/api/videos/'+videoID+'?v=2&alt=jsonc', function(data){
    var videoTitle = data.data.title;
    videoBox.after('<figcaption>'+videoTitle+'</figcaption>');
  });         
});

videoBox 变量指向该视频的特定 div。

【讨论】：