YouTube API - Enbedding By URL

Question

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?

Malcolm · Accepted Answer · 2013-09-02T11:33:39.660

1

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

edited Sep 02 '13 at 11:33

answered Sep 01 '13 at 16:31

Malcolm

784
3
7
20

Yeah, I know that. I was meaning How can I embed this: https://gdata.youtube.com/feeds/api/users/estXcrew/uploads?max-results=1 – tehX Sep 01 '13 at 16:41
1

That link takes me to a subscribe to this feed page but no video, I am not %100 sure if it works like that sorry, – Malcolm Sep 01 '13 at 16:53
Hmm. Thanks for your time. I'll research more to find a different solution – tehX Sep 01 '13 at 17:12
1

The above link is fine. The response is a xml (text) string. It depends on the browser program settings used, how the resonse is handled. One may display it as text only and another may use it (display only a part of the contents and/or ask if you like to subscribe to the feed.) – Als Sep 02 '13 at 07:09
@Als I have added another example, but it is in PHP. – Malcolm Sep 03 '13 at 19:42
@Malcom I have seen your PHP example and tried it. This PHP does work for me :) But this question is not mine. I only changed the given javascript code of the question asker, to show how the videoId could be replaced inside the function. A http client is available thru the included url: "jquery.min.js". The latest Browser versions should be able to parse JSON strings. Only the code to send the url and parse the response must still be written and added. – Als Sep 03 '13 at 20:03
Lol sorry I tagged the wrong person, sorry about that it should of been @estXcrew :/ – Malcolm Sep 03 '13 at 20:12

score 0 · Answer 2 · edited May 23 '17 at 10:25

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>

YouTube API - Enbedding By URL

2 Answers2