Thumbnails are used for a preview of a single or group of media entities in a single explorer window.
It saves time and gives a better focus to the user’s attention and help us grab attention and educate viewer enhancing web design project.
The description is a few words more than the title. The more words in the YouTube video description, the possibility of more exact keywords to represent on, which is very important to get found in search engines.
Video channels should know data about the video to rank better and get more public views because no one can see what exactly in the video content, so it needs data.
The main aim of the title is to represent and describe each result in the best way and which can relate to the user’s search query. The title is the foremost piece of information which is used to decide which link to click on, so it becomes important to retrieve well-understood titles on your web pages.
The titles help the search engine to crawl for the relevant data.
Title and Description plays a key role in making the video important and for search engine ranking factors.
Purpose: The article shows the title, description, and thumbnail for a particular YouTube URL link. HTML form requests a YouTube video URL for the given input.
When the user pastes the URL into the input field and submits it, this URL variable will be sent to the PHP file. After getting data from the URL, it will be previewed on the browser.
YouTube Video Data API key:
- YouTube Data API is available free for usage.
- We need the YouTube data API key for the implementation of the following example program.
- Each YouTube video will have a specific ID associated with it and this ID is passed to the API call for data retrieval. Let us see step by step how to create a YouTube data API key.
Approach:
- Go to the Google Developer Console link and login to your own Google account.
- After logging in, go to the link and click on the blue-colored CREATE PROJECT button.
- We have to wait for some time until Google prepares the developers’ project.
- Fill in the project name of your own choice.
- In Google API Console, click the ‘Select a project link’.
- Then click the plus button (+) to create a project.
- Enter the project name of your own choice and select other options >> Click the create button.
- It takes a few seconds to set up a developer’s new project. Once it’s done, select your project.
- Click the library link on the left navigation menu. Under the YouTube APIs section, click the YouTube Data API link.
- Enable the YouTube Data API v3 to access the YouTube data by clicking the uppercased ENABLE button.
- Click the Credentials link on the left navigation menu. Press the “Create credentials button” selecting the API key.
- A dialog box will appear with your newly created API Key. Use this API key in the YouTube Data API v3 API request.
HTML code: The following code shows the HTML form to request YouTube video URL for the given input. When the user pasting the URL into the input field, this URL variable will be sent to the “showDetails.php” file. After getting data from the URL, it will be previewed on the browser.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <br /> <p> Please enter the youtube URL in the input </p> <div id="divID" class="container-class"> <form method="post" action="showDetails.php"> <input class="input-class" type="text" name="url" placeholder="Enter your URL"> <br /> <br /> <input class="submit-class" type="submit" name="submit" value="Submit URL"> </form> </div> </body> </html> |
PHP code: The following code demonstrates the “showDetails.php” file used in the above HTML web page.
html
<?php error_reporting (E_ALL ^ E_NOTICE); /*Just for your server-side code*/ header('Content-Type: text/html; charset=ISO-8859-1'); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <style> .thumbnail-class { width: 50%; margin: 10px; padding: 5px; border-radius: 1px; } #titleDescID { width: 50%; margin: 10px; padding: 10px; } </style> </head> <br /> <body> <div id="thumbnailID" class="thumbnail-class"> <?php if (isset($_POST['submit'])){ $url = $_POST['url']; /* Extracting the v element from the link*/ $vString = explode("v=", $url); $youtubeId = $vString[1]; } ?> <div id="videoDivID" style="width:600px;height:317px;"> <iframe id="iframe" style="width:100%;height:100%" src= "https://www.youtube.com/embed/<?php echo $youtubeId; ?>" data-autoplay-src=" </iframe> </div> </div> <?php //Its different for all users $myApiKey = 'ENTER YOUR API KEY'; $googleApi = . $youtubeId . '&key=' . $myApiKey . '&part=snippet'; /* Create new resource */ $ch = curl_init(); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); /* Set the URL and options */ curl_setopt($ch, CURLOPT_URL, $googleApi); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); curl_setopt($ch, CURLOPT_VERBOSE, 0); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); /* Grab the URL */ $curlResource = curl_exec($ch); /* Close the resource */ curl_close($ch); $youtubeData = json_decode($curlResource); $youtubeVals = json_decode( json_encode($youtubeData), true); $urlTitle = $youtubeVals ['items'][0]['snippet']['title']; $description = $youtubeVals ['items'][0]['snippet']['description']; ?> <div id="titleDescID"> <?php echo '<b>Title: ' . $urlTitle . '</b>'; echo '<b>Description: </b>' . $description; ?> </div> </body> </html> |
CSS code: The following code demonstrates the “style.css” file used in the above HTML code.
CSS
body{ font-family: Sans-serif,Arial; width: 600px; } .container-class{ background: #e9e9e9; border: #B3B2B2 1px solid; border-radius: 2px; margin: 20px; padding: 40px; } .input-class{ width: 100%; border-radius: 2px; padding: 20px; border: #e9e9e9 1px solid; } .submit-class{ padding: 10px 20px; background: #000; color: #fff; font-size: 0.8em; width: 110px; border-radius: 4px; cursor:pointer; border: black 2px solid; } |
Output:
The following image shows the screen before the user clicks the “Submit URL” button:
The following image is shown after the YouTube link is entered by the user and submitted:
