Replacing youtube image placeholders to video - javascript

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.

Related

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.
}
});

How to embed a Youtube Video using the URL inserted from an input

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>');
});
});

To find the value of src in a string

I have the following string
"<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>".
how can i get the value of src using javascript.
You can use a regular expression to pull the src from your string like so:
var myString = '<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>';
var regex = /<iframe.*?src="(.*?)"/;
var src = regex.exec(myString)[1];
console.log(src);
Give a name to your frame such as
"name="frame1" width=..... />"
then use this
alert(document.frames['frame1'].location.href);

how to share a url with # in twitter using tweet_button.html

i have a twitter img with onclick function tweetpage
<img src="images/twtr.png" onclick="tweetPage();"/>
function tweetPage()
{
var url = "http://www.website.com/index.html#eyJkIjoidGhpcyBpcyBh";
var testUrl ="https://platform.twitter.com/widgets/tweet_button.html?url="+url
var htmlStr = '<iframe allowtransparency="true" frameborder="0" scrolling="no"'
+'src="'+testUrl+'"'
+'style="width:130px; height:20px;padding-top: 37%;"></iframe>'
$('#twitLindDiv').html(htmlStr);
}
and a tweetbutton is shown. clicking on the tweet button a twitter popup box is shown
but the url in textbox contains only
http://www.website.com/index.html
how can i solve this.
I also tried
&hashtags= instead of #
the result was
http://www.website.com/index.html #eyJkIjoidGhpcyBpcyBh
how can i solve this
tweetid is the div to which this inner html is added (this works fine for me.)
var referenceUrl = window.location.toString();
var shareUrl = 'http://www.website.com/index.html#eyJkIjoidGhpcyBpcyBh'
$('#tweetid').html('<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1368146021.html#_=1369640770351&
count=none&
id=twitter-widget-0&
lang=en&original_referer='
+encodeURIComponent(referenceUrl)
+'&related=nothing%20to%20worry&size=m&
text=LiveImpact&
url='+encodeURIComponent(shareUrl)
+'" class="twitter-share-button twitter-count-none" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 56px; height: 20px;">'
+'</iframe>');

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);

Categories