Замена заполнителей изображения YouTube на видео - PullRequest
Новая
       12

Замена заполнителей изображения YouTube на видео

2 голосов
/ 03 декабря 2011

У меня есть функция jquery, которая заменяет ссылку в двух значениях на изображение, например, для 

<div class="comment">
[youtube]http://www.youtube.com/watch?v=T1hf4B5pyjQ&feature=grec_index[/youtube]
random text
</div>

будет выводиться как 

<div class="comment"><img width="420" height="315" src="http://i4.ytimg.com/vi/T1hf4B5pyjQ/hqdefault.jpg"></img>
random text
</div>

с этой функцией ниже 

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/,
    youtubeHTML = '<img width="420" height="315" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
$(".comment").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeTag, youtubeHTML))
});

Я пытаюсь щелкнуть изображение, заменив youtubeHTML на youtubeIFRAME. Я попробовал это ниже или проверь его на JSFIDDLE http://jsfiddle.net/yusaf/uLTzw/28/

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/,
    youtubeHTML = '<img width="420" height="315" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
    youtubeIFRAME = '<iframe width="420" height="315" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>';
$(".comment").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeTag, youtubeHTML))
});

$("img").click(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeHTML, youtubeIFRAME))
});

1 Ответ

3 голосов
/ 03 декабря 2011

Проблема в том, что $1 часть внутри youtubeHTML, которая не позволяет обработчику корректно заменить HTML.

Одним из быстрых решений является использование атрибута data для youtubeHTML и сохранение ссылки там же. Затем просто замените $1 внутри youtubeIFRAME значением этого атрибута data.

Здесь - фрагмент кода. 

var youtubeTag = /\[youtube]https?:\/\/(?:www\.)?youtu(?:be\.com|\.be)\/(?:watch\?v=|v\/)?([A-Za-z0-9_-]+)([a-zA-Z&=;_+0-9*#-]*?)\[\/youtube]/;
var youtubeHTML = '<img width="420" data-address="$1" height="315" class="youtube" src="http://i4.ytimg.com/vi/$1/hqdefault.jpg"></img>';
var youtubeIFRAME = '<iframe width="420" height="315" class="youtube" src="http://www.youtube.com/embed/$1?rel=0" frameborder="0" allowfullscreen></iframe>';

$(".comment").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(youtubeTag, youtubeHTML));
});

$("img.youtube").click(function(){
    var $this = $(this);   
    $this.replaceWith(youtubeIFRAME.replace("$1", $this.attr("data-address")));
});

РЕДАКТИРОВАТЬ: В случае, если кто-то заинтересован в том, как написать какой-нибудь короткий текст «кликни здесь» поверх заполнителей изображения выглядят здесь .

...