This article will show you how to display YouTube thumbnail links in your WordPress website (or PHP application) by way of the video RSS feed. While another article is scheduled that'll display the same output using the YouTube API, the RSS method navigates the requirement to register for the API, making the process a little easier.
The block of YT code has undergone a numerous of variations because of the multitude of ways in which the data might be rendered. Because the thumbnail tower is essentially an image-feature, we once supported different methods of cropping and scaling the images we retrieved from YouTube... but that didn't suit everybody. What's published on this page is now a cupcake version - it's up to you to add the decoration. At the bottom of the page are a few options that might assist with image manipulation.
Note: More complete YouTube renderings can be built with version 3 of YouTube's API, and that information is forthcoming. Note that changes made to our backend may impact upon the examples (we'll tidy up formatting when time permits).
How To Find Your YouTube Channel RSS Feed
Your YouTube RSS feed can be found by navigating your way to
https://www.youtube.com/feeds/videos.xml?channel_id=123, where 123 is your own channel ID. If you don't know what your Channel ID is, view the source for your YouTube page and search for the text
videos.xml?channel_id - it will reveal the full XML feed. Alternatively, select your own channel from your subscriptions list and note string of text after
channel. For example, the channel URL for BeliefMedia's YouTube page is
https://www.youtube.com/channel/UC3qxAmFHsyqAnrg_UbbsHjQ. Our channel ID is
The shortcode of
[ytrss channel="UC3qxAmFHsyqAnrg_UbbsHjQ" number="3"] will render the following:
The second example includes 3 random videos with the title text overlaid on the video thumbnail. The shortcode of
[ytrss channel="UC3qxAmFHsyqAnrg_UbbsHjQ" number="3" random="1" type="1"] will return the following:
The final example illustrates how the feed might look if you applied some styling. Shortcode of
[ytrss channel="UC3qxAmFHsyqAnrg_UbbsHjQ" number="2" random="1" type="1" width="300" style="border: 5px dotted; background: #ff0000; padding-left: 10px; padding-right: 10px; padding-top: 10px;" span="font-size: 1.2em; font-weight: bold; background: #FFFF80; color: #000000"] returns the following abomination.
Copy and paste the WordPress function into your theme's
functions.php file or, if you sensibly have one installed, your custom functions plugin.
The second function on this page is required to return the appropriate thumbnail size. Additionally, the function below is necessary to resize images (discussed below).
The required function referenced on this page lists the most commonly used YouTube thumbnails. The only two thumbnails that return the 16:9 thumbnail (or those that are returned without the top and bottom black bars) are the
mqdefault (320 x 180) and
maxresdefault (1920 x 1080) images. If you're not using a library to scale remote images automatically, the
mqdefault image can easily be scaled down without too many issues.
If you're not too concerned about importing all your YouTube images into your own WordPress library, you can create your own 16:9 (1.777) cropped image size and use the function on this page to create appropriately scaled thumbnails... although this does require slight modification to the code.
mqdefault(320 x 180) image is referenced by default.
widthattribute or the width of the referenced image.
spanattribute. By default we use
font-size: 0.9em; font-weight: bold;.
words="15"(where 15 is the maximum number of words to return).
text="0". To overlay the text on the thumbnail, use
Used outside of WordPress, the function on this page may be used. As with the shortcode, it requires the second
beliefmedia_youtube_thumbnail() function on this page. It also requires Simple Cache and the
beliefmedia_youtube_thumbnail_size() function above.