Embed YouTube via post using the API

I think the solution to your entire problem is using the Youtube API (v3)). I will break my response into two items. But it's not exactly the solution of what you want, because I did not use the API in depth to say exactly which methods to use. But it has very extensive documentation to help you implement what you want.

1) To get the video information, extract the id of the video from the url (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 bit. It's with JavaScript, but it should give you a sense of what methods to use from their REST API. You may 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 ( Players API ), where you can place a Player embedded in your page, with various youtube settings via html.

Another suggestion would be to use the API via JavaScript, because of the interaction form, rather than PHP, but both options are possible.

First, thanks for replying, I took a look at the YouTube API but did not find what I was looking for just a couple of examples that I had difficulty understanding. So I entered the source code of the site from which I recorded the video and I'll post the codes I found here to see if you or someone else can can help me understand it and put it to work:

In a .js file I 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 separate .js file:

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;
}

}

e:

/**************** 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 thing as the video? Thank you.

Thank you for responding.

I'm already able to use the YouTube API. It generates exactly what I want, the thumbnail, the title and the description, but when I hover over the thumbnail I wish I could click on it and expand it and I can view the video as well as show the video I posted ...

Here's a print of what I'm already getting:

AndthecodesIuse:

index.php

<divclass="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 already said, I want to hover over the thumbnail and click it to expand and I can view the video as I show it at: link