Show Image Thumbnail by YouTube Video URL using PHP

Last modified on March 1st, 2018 by Vincy.

Thumbnails are used for preview a single or group of media entities in a single explorer window. By showing thumbnails, we can have a shortcut or quick-view to see more voluminous data without navigation. Websites use thumbnails to showcase content in a gallery format. For example, the online shopping cart websites showcase their product gallery with image thumbnails. The news broadcasting websites are showing video thumbnails for a quick look into the videos.

photo-thumbnail

View Demo

I created the thumbnail image URL from the YouTube video source URL using PHP. The video URL is given as an input posted via HTML form. In PHP, the unique id of the video is extracted and used to form the image thumbnail source. If you want to show an image thumbnail in a gallery for your favorite YouTube videos, you can use this example to get the thumbnail source URL.

Getting Video URL using HTML Form

This HTML code is used to show a HTML form with an input option to let the user enter the YouTube video URL. After submitting the form, the input URL is processed in a PHP file to show the image thumbnail.

<h2>Show Image Thumbnail by YouTube Video URL using PHP</h2>

<div class="frm-video-image-thumbnail">
    <form method="post" action="">
        <input class="input-field" type="text" name="url"
            placeholder="Enter URL"><br /> <br /> <input
            class="btn-submit" type="submit" name="submit"
            value="Submit">
    </form>
    <div class="thumbnail">
        <?php
if (! empty($videoId)) {
    ?>
        <h3 class="thumb-head">Thumbnail Image:</h3>
        <img
            src="https://img.youtube.com/vi/<?php echo $videoId; ?>/hqdefault.jpg"
            width="250" />
        <?php
}
?>
    </div>
</div>

Create Thumbnail Source From Video using PHP Code

This PHP code reads the video URL posted via the HTML form. It extracts the unique id from the video using PHP explode(). Then it creates the thumbnail source URL by using the unique id of the video. This source URL is used to show the preview of the video using thumbnail image.

<?php
if (isset($_POST['submit'])) {
    $url = $_POST['url'];
    $value = explode("v=", $url);
    $videoId = $value[1];
}
?>

Image Thumbnail Screenshot from YouTube Video URL

This screenshot shows the thumbnail image output created by using the given YouTube URL.

image-thumbnail-output-for-youtube-video

View DemoDownload

↑ Back to Top

Share this Article