I am trying to get youtube videos to be automatically embedded into a webpage.

The webpage has keywords already passed in from the url: /view.php?id=keywords123 These are used for creating content on a template and I need it to also display a relevant video from youtube.

Is there code that will search youtube and return the embed code or the video id to be embedded?

Cheers in advance!

I am trying to get youtube videos to be automatically embedded into a webpage.

The webpage has keywords already passed in from the url: /view.php?id=keywords123 These are used for creating content on a template and I need it to also display a relevant video from youtube.

Is there code that will search youtube and return the embed code or the video id to be embedded?

Cheers in advance!

• php
• javascript
• api
• youtube
• embed

• 1 This should give you a start: code.google./apis/youtube/2.0/… – Jason Gennaro Commented Jan 3, 2012 at 20:31
• @JasonGennaro You should have post this as an answer as all required information is there or accessible from there. – LukeP Commented Jan 3, 2012 at 20:43
• Thanks @JasonGennaro, have read through it, anyone have an example? – Samwise Commented Jan 3, 2012 at 21:03

4 Answers 4

Check this link from IBM. It is a very old link but I wanted to do something similar earlier and helped me a lot. It has some examples about how you will perform a keyword search and parse the xml response.

Check out Youtube Player API

Youtube Player Demo: http://code.google./apis/youtube/youtube_player_demo.html

Youtube Actionscript player api: http://code.google./apis/youtube/flash_api_reference.html

Youtube Javascript player api: http://code.google./apis/youtube/js_api_reference.html

I use jquery to get the youtube embed url:

var re = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube\.\S*[^\w\-\s])([\w\-]{11})(?=[^\w\-]|$)(?![?=&+%\w]*(?:['"][^<>]*>|<\/a>))[?=&+%\w-]*/ig;

video_url= text.replace(re,'http://www.youtube./embed/$1');

html='<p><iframe width="100%" height="300" src="'+video_url+'" frameborder="0"></iframe></p>';

$("#video_place").append(html);

I would suggest you to use json api, following is the code,cheers.

  <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.3.2/jquery.min.js"></script>

  <script type="text/javascript" src="http://swfobject.googlecode./svn/trunk/swfobject/swfobject.js"></script>
  <script type="text/javascript">

  $(function(){

      $("a").click(function(){
          alert("");
          $("#sc").attr("src","http://gdata.youtube./feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos2");


          });


      });

function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '500', '400', '9.0.0', false,
      false, {allowfullscreen: 'true'});
}




function showMyVideos(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul>'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t;
    html.push('<li>', title, '</li>');
  }
  html.push('</ul>');
  document.getElementById('videos').innerHTML = html.join('');
}


</script>
<script src="http://www.google./uds/api?file=uds.js&v=1.0"
    type="text/javascript"></script>
<link href="http://www.google./uds/css/gsearch.css"
    rel="stylesheet" type="text/css"/>
<script src="http://www.google./uds/solutions/videobar/gsvideobar.js"
    type="text/javascript"></script>
<link href="http://www.google./uds/solutions/videobar/gsvideobar.css"
    rel="stylesheet" type="text/css"/>
<style>
pre {
  background-color:#FAFAFA;
  border:1px solid #BBBBBB;
  font-size:9pt;
  line-height:125%;
  margin:1em 0pt 0pt;
  overflow:auto;
  padding:0.99em;
}
code, pre {
  color:#007000;
  font-family:monospace;
}
.titlec {
  font-size: small;
}
ul.videos li {
  float: left;
  width: 10em;
  margin-bottom: 1em;
  cursor:pointer;
}
ul.videos
{
  margin-bottom: 1em;
  padding-left : 0em;
  margin-left: 0em;
  list-style: none;
}
#videoBar {
  width : 160px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top : 4px;
  padding-right : 4px;
  padding-left : 4px;
  padding-bottom : 0px;
}
</style>
</head>
<body>





  <div id="playerContainer" style="width: 20em; height: 400px; float: left; position:relative">
    <object id="player"></object>
  </div>
  <br>
  <div id="videos2" style="width:500px; clear:both;height:300px; overflow:auto;"></div>
  <script id="sc" 
    type="text/javascript" 
    src="http://gdata.youtube./feeds/users/ThePitchUTV/uploads?alt=json-in-script&callback=showMyVideos">



  </script>