如何从图像缩略图源获取 YouTube 视频 ID,并将其设置为 iframe? [英] how to get YouTube video id from image thumbnail source, and set as an iframe?
问题描述
所以如果图片标签是
<img src="http://i1.ytimg.com/vi/LL0Y4MZ45bo/0.jpg" class="youtubeimg"></img>
我不知道如何从缩略图 src 中提取 YouTube 视频 ID (LL0Y4MZ45bo
),然后将其应用于 iframe.
I don't know how to extract the YouTube video id (LL0Y4MZ45bo
) from the thumbnail image src and then apply it to an iframe.
目前我有 100% 的工作,这将 src 应用到 iframe.但我不知道该怎么做是在这种情况下从 img 标签中获取 id LL0Y4MZ45bo
并将其添加到 youtube embed src http://www.youtube.com/embed/LL0Y4MZ45bo
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>
那么如何从 img 中提取 id 并应用于 iframe src?
so how can I extract id from the img and apply to iframe src?
推荐答案
这提取了 使用正则表达式的 YouTube ID,我假设它至少有 11 个字符作为 第一个 YouTube 视频 ID 有 11.
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>
这有效,但是 YouTube Player API 可能会为您提供加载 iFrame 的更稳定解决方案,将来一旦稳定,我会推荐 YouTubeiFrame API
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
这篇关于如何从图像缩略图源获取 YouTube 视频 ID,并将其设置为 iframe?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!