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.
}
});
Related
I have an object like this:
object = {
iframe: "<iframe width="560" height="315" src="YouTube link"></iframe>"
}
I need to take the width (in this case 560) and height (in this case 315) value inside this with jQuery/js. Because I need to use this value.
Is that possible?
Thank you.
You can use regex to isolate the two parameters:
var object = {
iframe: '<iframe width="560" height="315" src="YouTube link"></iframe>' // string was invalid before, replaced quotes with apostrophes
}
var regexFound = object.iframe.match(/width="(\d*?)" height="(\d*?)"/);
var asArray = [regexFound[1], regexFound[2]];
var asObject = {width: regexFound[1], height: regexFound[2]}
console.log(asArray, asObject);
Firstly note that the string in the example is invalid due to the repeated use of ". To make the string valid, delimit it with ' and use " to contain the attribute values within it.
As you've tagged the question with jQuery you can use that to build an object from the string instead of parsing it using regex:
let object = {
iframe: '<iframe width="560" height="315" src="YouTube link"></iframe>'
}
let $iframe = $(object.iframe);
console.log($iframe.prop('width'));
console.log($iframe.prop('height'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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)
so I'm trying to have a youtube video embedded in my webpage. To embed it I need to use the URL that the user inserted in an input. What would be the jquery/JavaScript I need to use to embed the video?
Create an iframe
<iframe id="myVid" width="420" height="315"
src="">
</iframe>
Then grab the input from the user preferably the url and pass it with jquery
$('#myVid').attr('src', "user-supplied-url")
Formatted code from #theDoctor
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
var myId;
$(document).ready(function() {
$('#embed1').click(function() {
var myUrl = $('#URL1').val();
myId = getId(myUrl);
$('#youtubeID1').html(myId);
$('#youtube1').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');
});
});
If I have a playlist url, say "https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" and I put it in an iframe with:
<iframe src="http://www.youtube.com/playlist?list=UUK376qNDlNZZDNHsnaWuTeg" width ="1920" height="1080"></iframe>
I get a blank iFrame, so how do I fix that? Also, I only want to display the "pl-video-list" div, not the rest of the web page. The other responses on stackoverflow were all website specific, or didn't seem to work.
Another option extract playlist using JQuery
<script>
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/UUK376qNDlNZZDNHsnaWuTeg?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
list_data += '<br><br>'+ feedTitle+'';
});
$(list_data).appendTo(".playlist");
});
</script>
<ul class="playlist"></ul>
http://jsfiddle.net/jamie8763/g5unx78b/
This probably isn't the answer your were looking for but <iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB" frameborder="0" allowfullscreen></iframe> allows you to view the first video in the playlist with a dropdown to view the rest of the playlist.
As for your blank iframe, I am getting the following error when I try it.
Refused to display
'https://www.youtube.com/playlist?list=PLRU-B1PBK4Buu_yoMI8V-eTel9O3gVMpB'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
As far as I know, there isn't a way to scecify a certain div to display in an iframe. It's either all or nothing.
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.