We Keep Coding

How can I replace youtube short code to iframe?

There is youtube short code from using wordpress
[youtube id="YOUTUBE_ID" width="650"]
And I have to replace short code to iframe
<iframe
class="ql-video ql-align-center"
frameborder="0"
allowfullscreen="true"
src="https://www.youtube.com/embed/YOUTUBE_ID?showinfo=0"
>
The iframe is not HTML element tag. This is just string from server database. I'm using with dangerouslySetInnerHTML
The whole string value is like
<p class="ql-align-center"><br></p><p class="ql-align-center">test</p>
<p class="ql-align-center"><br></p>
<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/YOUTUBE_ID?showinfo=0"></iframe>
<p class="ql-align-center"><br></p>
const originContent = '<div>test</div><h1>test</h1>[youtube id="YOUTUBE_ID" width=650] <p>test</p>'
const youtubeShortCode = '[youtube id="YOUTUBE_ID" width=650]'
const youtubeId = "YOUTUBE_ID"
const content = originContent.replace(youtubeShortCode, `<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/${youtubeId}?showinfo=0"></iframe>`)
console.log(content)
Actually I don't know how can I get youtubeShortCode and youtubeId
How can I fix it?

You can search the YouTube ID and replace html in just one line code by using String​.prototype​.replace():
const originContent = '<div>test</div><h1>test</h1>[youtube id="YOUTUBE_ID" width=650] <p>test</p>'
const content = originContent.replace(/\[youtube id=\"([^"]+)\" width=(\d+)\]/i, '<iframe class="ql-video ql-align-center" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/$1?showinfo=0"></iframe>')
console.log(content)
Or, if you just want to get the ID and width, you can match it by using String​.prototype​.match():
const originContent = '<div>test</div><h1>test</h1>[youtube id="YOUTUBE_ID" width=650] <p>test</p>'
const [, youtubeId, width] = originContent.match(/\[youtube id=\"([^"]+)\" width=(\d+)\]/i)
console.log(youtubeId, width)

Getting Facebook video ID using jQuery

I've made a script that gets the ID for YouTube and Vimeo, but I am not sure how to get the ID from the Facebook embed URL.
Example embed:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
I need to get the ID which in this case is: 1261009690594307
How can I it with YouTube? I am new to JS so not sure how to replicate but getting the ID for this one.
$.each($('iframe[src*="youtube.com"]'), function() {
var player = $('<div class="video-player">');
var id = $(this).attr('src');
id = id.substr(id.lastIndexOf("/")+1);
player.attr('data-id', id);
player.html(videoThumbYT(id));
player.on('click', videoIframeYT);
var videoContainer = $('<div class="video-container">');
videoContainer.append(player);
$(this).replaceWith(videoContainer);
});

Fastest using the Regular Expressions.
function fbvideoID(frame) {
var myRegexp = /2F(\d+)%/g;
var match = myRegexp.exec(frame);
return match[1];
}
var facebookVideo = '<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FHammers.Serbia.Official%2Fvideos%2F1261009690594307%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>';
document.write(fbvideoID(myString)); //returns ID 1261009690594307
Explanation
Regular Expression
/2F(\d+)%/g
Selects the ID. Test it here!
var match = myRegexp.exec(frame);
Returns array of two elements. Documentation here.
0: "2F1261009690594307%"
1: "1261009690594307"
The 0 index is always the whole expression. The 1 is only the (\d+) - braces. Which contains our ID.
Hope I helped you!

Here's one approach, could be refined a bit.
$.each($('iframe[src*="facebook.com/plugins/video"]'), function() {
var url = decodeURIComponent($(this).attr('src'));
var id = url.match(/\/\d+\//);
if (id) {
id = id.slice(1,-1);
console.log(id);
//do your player stuff here.
}
});

Jquery append html, not variable name

I need to append the vidyourl3, but my script keeps adding vidyourl3 name only. Where am I doing a mistake ?
var vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html("vidyourl"+kacki);

If you have multiple urls then create an object to hold those references as given below
var urls = {
vidyourl3: '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>'
}
then use the object key along with bracket notation to access the value
kacki = 3;
$("#vidgelcekburaya").html(urls["vidyourl"+kacki]);

You're putting a literal string in your html. Take the quotes off of your vidyourl and it will work:
$("#vidgelcekburaya").html(vidyourl3 + kacki);
Another problem which is hard to decide what you're trying to do is; your first variable is called vidyourl3, while you then put in vidyourl in your html replace. Which one should it be?

Try:
window.vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html(window["vidyourl"+kacki]);
If your variable needs to be in the local scope, try
var vidyourl3 = '<iframe id="vide3" width="255" height="195"
src="http://www.youtube.com/embed/Nficz8WZwrk?wmode=opaque" frameborder="0"
allowfullscreen></iframe>';
kacki = 3;
$("#vidgelcekburaya").html(eval("vidyourl"+kacki));
I wouldn't use this method, because eval can be kind of scary.

jQuery - Get part of a string

In JS/jQuery, I need to strip a YouTube embed code to reveal just the SRC value. How is this possible?
The embed code, for example:
string = "<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>"
I am looking to grab everything between src=" and ". I'm thinking maybe a regular expression will do it but not overly sure...
Any suggestions would be great.

try :
var str='<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var src = $(str).attr("src");

In jQuery:
$('iframe:first').attr('src');
In plain JavaScript:
document.getElementsByTagName('iframe')[0].src;
UPDATE
Starting with a string, using jQuery:
string = '<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var src = $(string).attr('src');
And without jQuery:
string = '<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var div = document.createElement('div');
div.innerHTML = string;
var src = div.firstChild.src;
alert(src);
​

http://www.w3schools.com/jsref/jsref_match.asp
Try this
var str='<iframe width="630" height="354" src="https://www.youtube.com/embed/NYjPglsyYZA?rel=0" frameborder="0" allowfullscreen></iframe>';
var n=str.match(/src="(.*)"/);
var result = n.substring(5,n.length()-1);

Replacing youtube image placeholders to video

I have a jquery function which replaces a Link within two values with an image for e.g
<div class="comment">
[youtube]http://www.youtube.com/watch?v=T1hf4B5pyjQ&feature=grec_index[/youtube]
random text
</div>
will be output as
<div class="comment"><img width="420" height="315" src="http://i4.ytimg.com/vi/T1hf4B5pyjQ/hqdefault.jpg"></img>
random text
</div>
with this function below
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))
});
what I'm trying to do is onclicking the image replace youtubeHTML with youtubeIFRAME i have tried this below or check it out on 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))
});

The problem is that $1 part inside youtubeHTML which is not allowing the handler to replace the HTML correctly.
One quick solution is to use data attribute on youtubeHTML and store the link also there. Then simply replace the $1 inside the youtubeIFRAME with the value of that data attribute.
Here is the snippet.
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")));
});
EDIT: In case anyone is interested in a way how to write some kind of short "click here" text over the placeholder images have a look here.