Response title
This is preview!
Change YouTube and Yahoo Video links to embedded players
in Using jQuery
•
3 years ago
Looks at each paragraph and converts youtube and yahoo video links to embedded players.
Example
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Change Yahoo and YouTube URLs into Embedded Videos with jQuery</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("p").each(function() {
// get paragraph text
var mystring = $(this).text();
// regular expression for a youtube video
var expression = /http:\/\/(\w{0,3}\.)?youtube\.\w{2,3}\/watch\?v=[\w-]{11}/gi;
// get an array of matched video urls
var videoUrl = mystring.match(expression);
if (videoUrl !== null) {
// for each video url change it to embedded
for(count = 0; count < videoUrl.length; count++) {
// replace url with embedded video
mystring = mystring.replace(videoUrl[count], embedVideo(videoUrl[count]));
}
}
// regular expression for a yahoo video
expression = /http:\/\/video\.yahoo\.com\/watch\/\d{7}\/\d{8}/gi;
videoUrl = mystring.match(expression);
if (videoUrl !== null) {
// for each video url change it to embedded
for(count = 0; count < videoUrl.length; count++) {
// replace url with embedded yahoo video
mystring = mystring.replace(videoUrl[count], embedYahooVideo(videoUrl[count]));
}
}
// replace old paragraph with new paragraph
$(this).replaceWith(mystring);
});
function embedVideo(content) {
var youtubeUrl = content;
var youtubeId = youtubeUrl.match(/=[\w-]{11}/);
var strId = youtubeId[0].replace(/=/,'');
var result = '<div class="embedded_video">\n';
result += '<object width="425" height="344">\n';
result += '<param name="movie" value="http://www.youtube.com/v/' + strId + 'g&hl=en&fs=1&"></param>\n';
result += '<param name="allowFullScreen" value="true"></param>\n';
result += '<param name="allowscriptaccess" value="always"></param>\n';
result += '<embed src="http://www.youtube.com/v/' + strId + '&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>\n';
result += '</object>\n';
result += '</div>\n';
return result;
}
function embedYahooVideo(content) {
var yahooUrl = content;
var id = yahooUrl.match(/\d{8}/);
var vidId = yahooUrl.match(/\d{7}/);
var result = '<div class="embedded_video">\n';
result += '<object width="512" height="322">\n';
result += '<param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" />\n';
result += '<param name="allowFullScreen" value="true" />\n';
result += '<param name="AllowScriptAccess" VALUE="always" />\n';
result += '<param name="bgcolor" value="#000000" />\n';
result += '<param name="flashVars" value="id=' + id + '&vid=' + vidId + '&lang=en-us&intl=us&embed=1&ap=9460582" />\n';
result += '<embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.46" type="application/x-shockwave-flash" width="512" height="322" allowFullScreen="true" AllowScriptAccess="always" bgcolor="#000000" flashVars="id=' + id +'&vid=' + vidId + '&lang=en-us&intl=us&embed=1&ap=9460582" >\n';
result += '</embed>\n';
result += '</object>\n';
result += '</div>\n';
return result;
}
});
</script>
</head>
<body>
<p>Change video site links into embedded players: http://www.youtube.com/watch?v=44xb9nb2P7g http://www.youtube.com/watch?v=jzWzjWG1PZs</p>
<p>A Yahoo video: http://video.yahoo.com/watch/6646643/17263080</p>
</body>
</html>
