Trying to make something similar to facebook. I’ve created this javascript url pattern converter. Something like this could be triggered just as the user clicks on the submit button for a forum post – convert url’s into embed html variants. Any ways to improve this?
http://jsfiddle.net/88Ms2/377/
JavaScript
x
43
43
1
var videoEmbed = {
2
invoke: function(){
3
4
$('body').html(function(i, html) {
5
return videoEmbed.convertVideo(html);
6
});
7
8
},
9
convertVideo: function(html){
10
var pattern1 = /(?:http?s?://)?(?:www.)?(?:vimeo.com)/?(.+)/g;
11
var pattern2 = /(?:http?s?://)?(?:www.)?(?:youtube.com|youtu.be)/(?:watch?v=)?(.+)/g;
12
13
if(pattern1.test(html)){
14
console.log("html", html);
15
16
var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
17
18
var html = html.replace(pattern1, replacement);
19
}
20
21
22
if(pattern2.test(html)){
23
console.log("html", html);
24
25
var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
26
27
var html = html.replace(pattern2, replacement);
28
}
29
30
31
return html;
32
}
33
}
34
35
36
37
38
39
40
setTimeout(function(){
41
videoEmbed.invoke();
42
},3000);
43
Advertisement
Answer
LATEST CODE ******** http://jsfiddle.net/88Ms2/378/
This mimics the facebook post feature – of turning a youtube, vimeo or image into a media based link. This will be useful in taking on
Interested in having the code enhanced.
JavaScript
1
34
34
1
var videoEmbed = {
2
invoke: function(){
3
4
$('body').html(function(i, html) {
5
return videoEmbed.convertMedia(html);
6
});
7
8
},
9
convertMedia: function(html){
10
var pattern1 = /(?:http?s?://)?(?:www.)?(?:vimeo.com)/?(.+)/g;
11
var pattern2 = /(?:http?s?://)?(?:www.)?(?:youtube.com|youtu.be)/(?:watch?v=)?(.+)/g;
12
var pattern3 = /([-a-zA-Z0-9@:%_+.~#?&//=]{2,256}.[a-z]{2,4}b(/[-a-zA-Z0-9@:%_+.~#?&//=]*)?(?:jpg|jpeg|gif|png))/gi;
13
14
if(pattern1.test(html)){
15
var replacement = '<iframe width="420" height="345" src="//player.vimeo.com/video/$1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
16
17
var html = html.replace(pattern1, replacement);
18
}
19
20
21
if(pattern2.test(html)){
22
var replacement = '<iframe width="420" height="345" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>';
23
var html = html.replace(pattern2, replacement);
24
}
25
26
27
if(pattern3.test(html)){
28
var replacement = '<a href="$1" target="_blank"><img class="sml" src="$1" /></a><br />';
29
var html = html.replace(pattern3, replacement);
30
}
31
return html;
32
}
33
}
34