Как получить идентификатор видео YouTube из источника миниатюр изображений, и установить в качестве iframe? - PullRequest
Новая
       54

Как получить идентификатор видео YouTube из источника миниатюр изображений, и установить в качестве iframe?

0 голосов
/ 24 октября 2011

Так что, если тег изображения 

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

Я не знаю, как извлечь идентификатор видео YouTube (LL0Y4MZ45bo) из миниатюрного изображения src и затем применить его к iframe.

в настоящее время у меня 100% работает, что применяет SRC к iframe. но то, что я не знаю, как это сделать, это получить идентификатор из тегов img в этом случае 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>

так как мне извлечь id из img и применить к iframe src?

Ответы [ 3 ]

3 голосов
/ 24 октября 2011

При этом извлекается идентификатор YouTube с использованием регулярного выражения , я предположил, что это будет минимум одиннадцать символов, так как первый идентификатор видео YouTube имеет 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>

Это работает, однако API проигрывателя YouTube может предоставить вам более стабильное решение для загрузки этого iFrame, в будущем, когда он станет стабильным, я бы порекомендовал YouTube iFrame API

1 голос
/ 24 октября 2011

Думаю, вам будет проще, если вы начнете изучать API YouTube .

0 голосов
/ 30 января 2017

Создайте URL в виде массива, а затем возьмите вторую до последней части. Например, это также работает с 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/

...