CODEWITHSUNDEEP
youtube-api
tehX
tehX

Reputation: 167

YouTube API - Enbedding By URL

I want to Embed A youtube video by url, example= https://gdata.youtube.com/feeds/api/users/estXcrew/uploads?max-results=1
This Is the block of code that I used

  <div id="player"></div>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '200',
          width: '200',
          videoId: '//video ID Usually goes here',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>

I Copied this code from the Site of the Youtube API since I don't have much experience with it yet. How do I replace the "videoId" Line with the link above?

Upvotes: 2

Views: 1437

Answers (2)

Malcolm
Malcolm

Reputation: 784

To load a YouTube video replace

//video ID Usually goes here

with the ID of the video you want to load.

Example YouTube video: http://www.youtube.com/watch?v=xmP7kQdAPhM

Now in the videoId I would use

videoId: 'xmP7kQdAPhM'

Or if you used some PHP you could try something like the following.

<?php
$feedURL = 'http://gdata.youtube.com/feeds/api/users/estXcrew/uploads?max-results=1';
$sxml = simplexml_load_file($feedURL);
$i=0;
foreach ($sxml->entry as $entry) {
$media = $entry->children('media', true);
$watch = (string)$media->group->player->attributes()->url;

$pat = '/\=([^\"]*?)\&/'; 
$value=$watch ;
preg_match($pat, $value, $matches); 

echo "<iframe title='YouTube video player' class='youtube-player' type='text/html' 
width='640' height='390' src='http://www.youtube.com/embed/$matches[1]'
frameborder='0' allowFullScreen></iframe>";   
?>

<div class="videoitem">
<div class="videotitle">
<h3><a href="<?php echo $watch; ?>" class="watchvideo"><?php echo $media->group->title; ?></a></h3>
<p><?php echo $media->group->description; ?></p>        
</div>
</div>      
<?php $i++; if($i==3) { echo '<div class="clear small_v_margin"></div>'; $i=0; } } ?>

Example

Upvotes: 1

Als
Als

Reputation: 1415

First, about the url. Note that this url means using version 2 and that this version has been deprecated. See "YouTube API Subject to the Deprecation Policy": https://developers.google.com/youtube/youtube-api-list Note also, that by default version 1 is used and you may want to add: v=2, for version 2. If you prefer the response in JSON instead of XML, then add: alt=json. For better reading add: prettyprint=true. For example: https://gdata.youtube.com/feeds/api/users/estXcrew/uploads?maxresults=1&v=2&alt=json&prettyprint=true Further, since JSON is used in api version 3, you may prefer JSON to be used. For using api version 3 it is necessary to obtain an api-key first, by registering. To capture the response, you need to send the url to the server using XMLHttpRequest() or ActiveXObject(). Look for (JS or other type) code libraries that may help you, for example to parse and compose XML or JSON strings; or send url requests. See for jSON parsing: Parse JSON in JavaScript?

About your code supplied: use parameters. For example, after getting a videoId:

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
// Adding a library to send requests to a server ?
</script>
-->

<script>
      var myVideoId = "ZY7aRxb-Z1c";  // Set the videoId here.

      // insert an iframe
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player; // reference to the player object
      var param = {      // video-player parameters
          height: '200',
          width: '200',
          videoId: 'xxxxxxxxxxx',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
       };
       param.videoId = myVideoId   // Replace the videoId parameter

      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', param);   // create the player object
      }

      function onPlayerReady(event) {
        event.target.playVideo();   // start to play
      }

      var done = false;   // flag
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          //setTimeout(stopVideo, 6000);  // This will stop playing after 6 seconds
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
</head>

<body>
<div id="player">please wait...</div>
</body>
</html>

Upvotes: 0

Related Questions