Youtube embed via post using API

Question

I could not find what I wanted, just similar things, I even made a video and posted on Youtube so you understand what I want to do, if someone can help me I thank you, follow the video below:

https://www.youtube.com/watch?v=B35uf1onOEk

I want, when placing the link in the text field and clicking submit appear a Youtube embed with the same information the video shows, and, when posting, if I click this embed it performs the video, ie exactly the same as I recorded in the video. If someone can give me a tutorial or can explain to me so I can understand and be able to do this.

Answer 1

I think the solution to your whole problem is by using the (Youtube API (v3)). I will break my answer into two items. But it’s not exactly the solution you want, because I didn’t use the API in depth to tell you exactly what methods to use. But it has very extensive documentation to help implement what you want.

1) To obtain the information from the video, extract the id the url video (via regex) and use the Youtube data API (Youtube Data API). I think this video Youtube Data API v3: Accessing the Description of a video using Javascript should help a little. It’s with Javascript, but should give you a sense of what methods to use from their REST API. Maybe you have to do something else to get the thumbnail of the video.

2) The second part is easier, you can either open the youtube window with the url you already have. Or you can use the Players API (API players), which allows you to place a built-in Player on your page, with various youtube settings via html.

Another suggestion would be to use the API via Javascript, due to the form of interaction, instead of PHP, but both options are possible.

Answer 2

First of all, thank you for answering, I took a look at the Youtube API but I couldn’t find what I was looking for just a few examples that I had trouble understanding. So I entered the source code of the website from which I recorded the video and I will post the codes that I found here to see if you or someone else can help me understand it and get it to work:

In a file . js found:

// Adiciona vídeo ao STREAM
root.delegate('#includeVideoStream','click',function(){

    var streamLink = getURL($("#stream-video").val());

    if(streamLink && !$('#stream-link-status').attr('value')){

        var video = $('#stream-video').val();

        $('#add-stream-image').parent().hide();

        $('#stream-description').append(video);

        $('#stream-video').val('');

        $('.formPublishVideo').hide();
        $('#cont-video-publish').hide();

        if(streamLink[0]=='YOUTUBE'){
            var ajx = new ajxQuery({
                'post' : '&videoID=' + streamLink[2],
                'url' : SYS_URL + 'youtube',
                'retorno' : 'json',
                'onCarregando' : function(){},
                'onRetorno' : function(json){
                    if(json[0]){

                        $('#stream-link-status').attr('value',1);
                        $('#stream-link').attr('value',streamLink[1]);
                        $('#stream-link-type').attr('value','YOUTUBE');
                        $('#stream-link-thumb').attr('value',json[2]);
                        $('#stream-link-title').attr('value',json[0]);
                        $('#stream-link-description').attr('value',json[1]);
                        $('#stream-link-embed').attr('value',json[3]);

                        $('#link-thumb').attr('src',json[2]);
                        $('#link-titulo').text(json[0]);
                        $('#link-description').text(json[1]);

                        $('#cont-stream-link').show();

                    }
                }
            });
            ajx.conectar();
        }
    }
})

I also found in another file . js separate:

function getURL(text) {
var patternLink = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
var patternYoutube = /youtu(be.com|.b)(\/v\/|\/watch\\?v=|e\/|\/watch(.+)v=)(.{11})/;

var er = new RegExp(patternLink);
var arLink = er.exec(text);

if(arLink){
    var er = new RegExp(patternYoutube);
    var arYoutube = er.exec(arLink[0]);
    if(arYoutube){
        return [
        'YOUTUBE',
        arLink[0],
        arYoutube[4]
        ];
    }else{
        return [
        'LINK',
        arLink[0],
        null
        ];
    }
    return true;
}else{
    return false;
}

}

and:

/**************** START STREAM ********************/

Function openVideo(newsID,param){

var obj = $("#item-"+newsID+" .link-thumb");

$(obj).html("");
$(obj).css("paddingBottom","10px");

switch(param[0]){
    case "YOUTUBE":
        $(obj).append("<iframe width='408' height='230' src='http://www.youtube.com/embed/"+param[1]+"?wmode=transparent' frameborder='0' allowfullscreen></iframe>");
        break;
}

}

Function streamCapture(){

var streamLink = getURL($("#stream-text").val());

if(streamLink && !$('#stream-link-status').attr('value')){
    if(streamLink[0] == 'YOUTUBE'){

        var ajx = new ajxQuery({
            'post' : '&videoID=' + streamLink[2],
            'url' : SYS_URL + 'youtube',
            'retorno' : 'json',
            'onCarregando' : function(){
                $('#content-loading').show();
            },
            'onRetorno' : function(json){
                if(json[0]){
                    $('#stream-link-status').attr('value',1);
                    $('#stream-link').attr('value',streamLink[1]);
                    $('#stream-link-type').attr('value','YOUTUBE');
                    $('#stream-link-thumb').attr('value',json[2]);
                    $('#stream-link-title').attr('value',json[0]);
                    $('#stream-link-description').attr('value',json[1]);
                    $('#stream-link-embed').attr('value',json[3]);

                    $('#link-thumb').attr('src',json[2]);
                    $('#link-titulo').text(json[0]);
                    $('#link-description').text(json[1]);
                    $('#link').show();
                }

                $('#content-loading').hide();
            }
        });
        ajx.conectar();
    }else{
}
}

} Function closeLink(){ $( '#stream-link-status,'+ '#stream-link,'+ '#stream-link-type,'+ '#stream-link-Thumb,'+ '#stream-link-title,'+ '#stream-link-Description,'+ '#stream-link-embed' ). attr("value",""); $('#link'). slideup(); $('#cont-addVideoPublish'). show(); }

How can I use these files to do the same as the video? Thank you.

Answer 3

thank you for answering.

I’m already able to use the Youtube API. It generates exactly what I want, the thumbnail, the title and the description, however, when I pass the mouse over the thumbnail I wish I could click it and the same expand and I can view the video, as it shows the video I posted...

Follow a print of what I’m already getting:

And the codes I use:

index php.

<div class="main">

<form class="pure-form" method="POST">
    <input type="url" name="url" placeholder="http://www.youtube.com/watch?v=xxxxxxx"><br />
    <center><input type="submit" value="Submit" class="pure-button pure-button-primary"></center>
</form>

<br />
<br />

<?php
if (isset($_POST['url'])):
    $url = $_POST['url'];

    // filter for valid url
    if(filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_QUERY_REQUIRED)):
        include 'youtubeapi.php';
        $youtube = youtube($url);

?>

    <div class="yt-div-igr">
        <div class="titulo">
            <p><?php echo $youtube->title ?></p>
        </div>

        <div class="thumbnail">
            <img src="<?php echo $youtube->thumbnail->sqDefault?>">
        </div>

        <div class="descricao">
            <p><?php echo $youtube->description ?></p>
        </div>
    </div>

    <?php endif?>
<?php endif?>

youtubeapi.php

<?php

Function youtube($url) { # get video id from url $urlQ = parse_url( $url, PHP_URL_QUERY ); parse_str( $urlQ, $query );

# YouTube api v2 url
$apiURL = 'http://gdata.youtube.com/feeds/api/videos/'. $query['v'] .'?v=2&alt=jsonc';

# curl options
$options = array(
    CURLOPT_URL => $apiURL,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_BINARYTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_TIMEOUT => 5 );

# connect api server through cURL
$ch = curl_init();
curl_setopt_array($ch, $options);
# execute cURL
$json = curl_exec($ch) or die( curl_error($ch) );
# close cURL connect
curl_close($ch);

# decode json encoded data
if ($data = json_decode($json))
    return (object) $data->data;

} ?>

As I said, I want to move the mouse over the thumbnail and click it expands and I can view the video as I show in: https://www.youtube.com/watch?v=B35uf1onOEk