如何从图像缩略图源获取YouTube视频ID，并设置为iframe？

发布于 2024-12-11 06:36:00 字数 714 浏览 0 评论 0原文

因此，如果图像标签是，

<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>

我不知道如何从缩略图 src 中提取 YouTube 视频 id (LL0Y4MZ45bo)，然后将其应用到 iframe。

目前我已经 100% 工作，它将 src 应用于 iframe。但我不知道该怎么做，在这种情况下从 img 标签获取 id LL0Y4MZ45bo 并将其添加到 youtube 嵌入 src http://www.youtube.com/embed/LL0Y4MZ45bo

<iframe src="" class="youtubeiframe"></iframe>

<script>
$(".youtubeiframe").attr({ 
  src: "http://www.youtube.com/embed/VIDEO-ID-EXTRACTED-FROM-THUMBNAIL-SRC",
});
</script>

那么我如何从img中提取id并适用于 iframe src？

原文

So if the image tag is

<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>

I don't know how to extract the YouTube video id (LL0Y4MZ45bo) from the thumbnail image src and then apply it to an iframe.

currently i have 100% working, which applys the src to the iframe. but what i dont know how to do is get the id from the img tags in this case LL0Y4MZ45bo and add it to the youtube embed src http://www.youtube.com/embed/LL0Y4MZ45bo

<iframe src="" class="youtubeiframe"></iframe>

<script>
$(".youtubeiframe").attr({ 
  src: "http://www.youtube.com/embed/VIDEO-ID-EXTRACTED-FROM-THUMBNAIL-SRC",
});
</script>

so how can I extract id from the img and apply to iframe src?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

┊风居住的梦幻卍 2024-12-18 06:36:00

此操作会使用正则表达式提取 YouTube ID，我假设第一个 YouTube 视频至少有 11 个字符ID 为 11。

<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>
<iframe src="" class="youtubeiframe"></iframe>

<script>
    $(function (){
        var youtubeid = $(".youtubeimg").attr("src").match(/[\w\-]{11,}/)[0];
        $(".youtubeiframe").attr({ 
              src: "http://www.youtube.com/embed/" + youtubeid,
        });
    });
</script>

此方法有效，但是 YouTube 播放器 API可能会为您提供更稳定的解决方案来加载该 iFrame，将来一旦它变得稳定，我会推荐 YouTube iFrame API

This extracts the YouTube ID using a Regular Expression, I made the assumption that it would be a minimum of eleven characters as the first YouTube Video ID has 11.

<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>
<iframe src="" class="youtubeiframe"></iframe>

<script>
    $(function (){
        var youtubeid = $(".youtubeimg").attr("src").match(/[\w\-]{11,}/)[0];
        $(".youtubeiframe").attr({ 
              src: "http://www.youtube.com/embed/" + youtubeid,
        });
    });
</script>

This works, however the YouTube Player API may provide you with a more stable solution to loading that iFrame, in the future once it becomes stable I would recommend the YouTube iFrame API

回复收藏 0 原文

離人涙 2024-12-18 06:36:00

我认为，如果您开始研究 YouTube API<，您可以更轻松地做到这一点/a>.

回复收藏 0 原文

缪败 2024-12-18 06:36:00

将 URL 作为数组，然后取倒数第二部分。例如，这也适用于 CSS 背景图像。

id = $('div').attr('style').split('/');
id = id[id.length-2];
alert("YouTube ID: " + id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-image:url('https://img.youtube.com/vi/MHUOty8-Ty0/0.jpg');"></div>

https://jsfiddle.net/Wobbo/wfyL1hem/7/

Make the URL as an array and than take the second to last part. For example this also works with CSS background-image.

id = $('div').attr('style').split('/');
id = id[id.length-2];
alert("YouTube ID: " + id);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-image:url('https://img.youtube.com/vi/MHUOty8-Ty0/0.jpg');"></div>

https://jsfiddle.net/Wobbo/wfyL1hem/7/

回复收藏 0 原文

~没有更多了~