TechWebUX

Aleksandar Urošević

<p>Add <strong>My YouTube Channel</strong> widget to the widget area or shortcode to post/page content, set <strong>Channel ID</strong> or <strong>Playlist ID</strong>, chose resource to use and keep defaults for all other options. And voila! You will get the latest video from chosen YouTube channel or playlist.</p>
<p><strong>IMPORTANT</strong> My YouTube Channel does not support <strong>Live Streams</strong> and does not have Gutenberg Block. Use <strong>Shortcode Block</strong> or <strong>Classic Block</strong> to insert shortcode to page/post content.</p>
<p>If you like our plugin and find it useful, please <a href="https://wordpress.org/support/view/plugin-reviews/youtube-channel" rel="ugc">write a review and rate it</a>.</p>
<p>For a manually picked set of videos from YouTube, check out <a href="https://wordpress.org/plugins/easy-youtube-gallery/" rel="ugc">Easy YouTube Gallery</a>.</p>
<h4>Features</h4>
<ul>
<li>Show latest videos from My YouTube Channel (ordered in reverse chronological order related to the creation date), or from Playlist</li>
<li>Option to get a random video from any of two resources</li>
<li>Responsive (one full-width video per row) or non-responsive</li>
<li>Preferred aspect ratio relative to width (16:9 and 4:3)</li>
<li>Custom width for video embeded object (default is 306px)</li>
<li>Four modes to display video: <strong>thumbnail</strong> (<code>default</code>), <strong>HTML5</strong> (<code>iframe</code>), <strong>HTML5 Asynchronous</strong> (<code>iframe2</code>) abd <strong>Playlist Embed</strong> (<code>playlist</code>)</li>
<li>Thumbnail mode opens the video in lightbox</li>
<li>[NEW] Optionally store thumbnail images locally for improved speed performance and cache policy</li>
<li>Enhanced Privacy – please note that display mode <strong>HTML5 (IFRAME) Asynchronous</strong> (shortcode parameter <code>iframe2</code>) does not support Enhanced Privacy due to YouTube API limitations</li>
<li>Hide or show video title above/below/inside video wrapped to HTML tag by your choice (h3, h4, h5, span or div)</li>
<li>Custom feed caching timeout</li>
<li>Optional video autoplay with optional muted audio</li>
<li>(Optional) <em>TinyMCE button</em> on post/page edit (can be disabled on General plugin settings page), which open a shortcode GUI generator to help you build a shortcode</li>
<li>Show link to channel/handle below videos (vanity and legacy username are deprecated since v3.23.0)</li>
<li>Final look is highly customisable thanks to classes for each element of YTC block!</li>
</ul>
<h4>Requirements</h4>
<p>For a fully functional plugin, PHP 7.4 or newer has required! If you use older PHP, we highly recommend you request from your developer, server support or hosting company to update PHP to a secure version.</p>
<h4>Styling</h4>
<p>Use Customizer, <code>style.css</code> from the child theme or <a href="https://wordpress.org/plugins/head-footer-code/" rel="ugc">Head & Footer Code</a> plugin to custom style and tweak the look and feel of the My YouTube Channel blocks. You can utilise the following classes:</p>
<ul>
<li><code>.widget_youtube-channel</code> – class of whole widget (parent for widget title and YTC block)</li>
<li><code>.youtube_channel</code> – YTC block wrapper class. Additional classes are available:
<ul>
<li><code>.default</code> – for non-responsive block</li>
<li><code>.responsive</code> – when you have enabled responsive option</li>
</ul>
</li>
<li><code>.ytc_title</code> – class for video title container above thumbnail/video object
<ul>
<li><code>.ytc_title_above</code> – additional class for video title above video/thumbnail</li>
<li><code>.ytc_title_below</code> – additional class for video title below video/thumbnail</li>
<li><code>.ytc_title_inside</code> – additional class for video title printed inside of the thumbnail</li>
<li><code>.ytc_title_inside_bottom</code> – additional class for bottom aligned video title printed inside of the thumbnail</li>
</ul>
</li>
<li><code>.ytc_video_container</code> – class of container for single item, plus:
<ul>
<li><code>.ytc_video_1</code>, <code>.ytc_video_2</code>, … – class of container for single item with ordering number of item in widget</li>
<li><code>.ytc_video_first</code> – class of first container for single item</li>
<li><code>.ytc_video_mid</code> – class of all other containers for single item</li>
<li><code>.ytc_video_last</code> – class of last container for single item</li>
<li><code>.ar16_9</code> – class for Aspect Ratio 16:9</li>
<li><code>.ar4_3</code> – class for Aspect Ration 4:3</li>
</ul>
</li>
<li><code>.ytc_thumb</code> – class of anchor for Thumbnail mode</li>
<li><code>.fluid-width-video-wrapper</code> – class for parent element of IFRAME for enabled responsive</li>
<li><code>.ytc_description</code> – class for video description text below thumbnail/video object</li>
<li><code>.ytc_link</code> – class of container for link to channel</li>
</ul>
<h4>Known Issues</h4>
<ul>
<li>Video title and description for embedded playlist mode do not work.</li>
<li>Removing the YouTube logo from the playback control bar does not work for all videos.</li>
<li>Autoplay does not work always</li>
</ul>
<p>If WordFence or other malware scan tool detect My YouTube Channel file <code>youtube-channel.php</code> as a potential risk because <code>base64_encode()</code> and <code>base64_decode()</code> functions, remember that we use this two functions to store and restore JSON feeds to transient cache, so potential detection is false positive.</p>
<h4>Credits</h4>
<ul>
<li>For playing videos in lightbox we use <a href="https://github.com/henrygd/bigger-picture" rel="nofollow ugc">Bigger Picture</a>.</li>
</ul>
<h4>Shortcode</h4>
<p>Along with Widget, you can add My YouTube Channel block inline by using shortcode <code>[youtube_channel]</code>. Default plugin parameters will be used for shortcode, but you can customize all parameters per shortcode.</p>
<p><strong>General Settings</strong></p>
<ul>
<li><code>class</code> (string) Set custom class if you wish to target special styling for specific YTC block</li>
<li><code>channel</code> (string) ID of preferred YouTube channel. Do not set full URL to channel, but just last part from URL – ID (name)</li>
<li><code>handle</code> (string) defined custom handle from <a href="https://www.youtube.com/handle" rel="nofollow ugc">YouTube handle</a></li>
<li><code>vanity</code> (string) <strong>DEPRECATED</strong> part after www.youtube.com/c/ from <a href="https://support.google.com/youtube/answer/2657968?hl=en" rel="nofollow ugc">Custom URL</a></li>
<li><code>username</code> (string) <strong>DEPRECATED</strong> Optional legacy YouTube username.</li>
<li><code>playlist</code> (string) ID of preferred YouTube playlist.</li>
<li><code>resource</code> (int) Resource to use for feed:
<ul>
<li><code>0</code> Channel (User uploads)</li>
<li><code>1</code> <strong>DEPRECATED</strong> Favorites (for defined channel)</li>
<li><code>2</code> Playlist</li>
<li><code>3</code> <strong>DEPRECATED</strong> Liked Videos</li>
</ul>
</li>
<li><code>cache</code> (int) Period in seconds for caching feed. You can disable caching by setting this option to 0, but if you have a lot of visits, consider at least short caching (couple minutes).</li>
<li><code>fetch</code> (int) Number of videos that will be used as stack for random pick (min 2, max 50)</li>
<li><code>num</code> (int) Number of videos to display per YTC block.</li>
<li><code>random</code> (bool) Option to randomize videos on every page load.</li>
</ul>
<p><strong>Video Settings</strong></p>
<ul>
<li><code>ratio</code> (int) Set preferred aspect ratio for thumbnail and video. You can use:
<ul>
<li><code>3</code> 16:9 (widescreen)</li>
<li><code>1</code> 4:3</li>
</ul>
</li>
<li><code>responsive</code> (bool) Distribute one full width video per row.</li>
<li><code>width</code> (int) Width of thumbnail and video in pixels.</li>
<li><code>display</code> (string) Object that will be used to represent video. We have couple predefined options:
<ul>
<li><code>thumbnail</code> Thumbnail will be used and video will be loaded in lightbox. (default)</li>
<li><code>iframe</code> HTML5 (iframe)</li>
<li><code>iframe2</code> HTML5 (iframe) with asynchronous loading – recommended</li>
<li><code>playlist</code> Embedded playlist (same behaviour as old function <code>only_pl</code>)</li>
</ul>
</li>
<li><code>thumb_quality</code> (string) Define image quality for thumbnail display mode. Default is <code>hqdefault</code>, available:
<ul>
<li><code>default</code> Default Quality (120x90px)</li>
<li><code>mqdefault</code> Medium Quality (320x180px)</li>
<li><code>hqdefault</code> High Quality (480x360px)</li>
<li><code>sddefault</code> Standard Definition (640x480px)</li>
<li><code>maxresdefault</code> Maximum Resolution (1280x720px)</li>
</ul>
</li>
<li><code>no_thumb_title</code> (bool) By default YouTube thumbnail will have tooltip with info about video title and date of publishing. By setting this option to 1 or true you can hide tooltip</li>
<li><code>themelight</code> (bool) By default YouTube have dark play controls theme. By setting this option to 1 or true you can get light theme in player (HTML5 and Flash)</li>
<li><code>controls</code> (bool) Set this option to 1 or true to hide playback controls.</li>
<li><code>autoplay</code> (bool) Enable autoplay of first video in YTC video stack by setting this option to 1 or true</li>
<li><code>mute</code> (bool) Set this option to 1 or true to mute videos set to autoplay on load</li>
<li><code>norel</code> (bool) Set this option to 1 or true to hide related videos after finished playbak</li>
<li><code>nobrand</code> (bool) Set this option to 1 or true to hide YouTube logo from playback control bar</li>
<li><code>nolightbox</code> (bool) Set this option to 1 or true to prevent YTC block with thumbnail to open in lightbox. If you have other plugin that trigger youtube links for lightbox, that one will steal links from this YTC block.</li>
<li><code>target</code> (string) If you enable nolightbox for specific YTC block, you can force opening of thumbnail links in new tab/window if you set this shortcode option to <code>_blank</code> like <code>target="_blank"</code>.</li>
</ul>
<p><strong>Content Layout</strong></p>
<ul>
<li><code>showtitle</code> (string):
<ul>
<li><code>none</code> – Hide title</li>
<li><code>above</code> – Display title above video/thumbnail</li>
<li><code>below</code> – Display title below video/thumbnail</li>
<li><code>inside</code> – Display top aligned title inside thumbnail; if <code>display</code> is not <code>thumbnail</code> then treat as <code>above</code></li>
<li><code>inside_b</code> – Display bottom aligned title inside thumbnail; if <code>display</code> is not <code>thumbnail</code> then treat as <code>below</code></li>
</ul>
</li>
<li><code>titletag</code> – Video title HTML tag to wrap title (H3, H4, H5, div, span, strong, etc)</li>
<li><code>showdesc</code> (bool) Set to 1 or true to show video description.</li>
<li><code>desclen</code> (int) Set number of characters to cut down length of video description. Set to 0 to use full length description.</li>
<li><code>noinfo</code> (bool) Set to 1 or true to hide overlay video infos (from embedded player)</li>
<li><code>noanno</code> (bool) Set to 1 or true to hide overlay video annotations (from embedded player)</li>
</ul>
<p><strong>Link to Channel</strong></p>
<ul>
<li><code>goto_txt</code> (string)</li>
<li><code>popup</code> (int) Control where link to channel will be opened:
<ul>
<li><code>0</code> open link in same window</li>
<li><code>1</code> <strong>DEPRECATED</strong> open link in new window with JavaScript</li>
<li><code>2</code> open link in new window with target=”_blank” anchor attribute</li>
</ul>
</li>
<li><code>link_to</code> (string) URL to link:
<ul>
<li><code>none</code> Hide link (defult)</li>
<li><code>handle</code> YouTube handle URL</li>
<li><code>channel</code> Channel page</li>
<li><code>vanity</code> <strong>DEPRECATED</strong> Vanity custom URL</li>
<li><code>legacy</code> <strong>DEPRECATED</strong> Legacy username page</li>
</ul>
</li>
</ul>
<p><em>Please note, to enhance plugin functionality, we can change or deprecate some shortcode parameters in future.</em></p>
<h3>Filter hooks</h3>
<p>You can modify final output of video block by hooking to filter <code>ytc_print_video</code>.</p>
<p>Four parameters are provided:</p>
<ul>
<li><code>video_content</code> – HTML of original video block</li>
<li><code>item</code> – YouTube video object which contains:
<ul>
<li><code>snippet->publishedAt</code> – date of publishing YouTube video</li>
<li><code>shippet->title</code> – YouTube video title</li>
<li><code>shippet->description</code> – YouTube video description</li>
<li><code>snippet->resourceId->videoId</code> – YouTube video ID</li>
</ul>
</li>
<li><code>instance</code> – Current My YouTube Channel Block parameters, including global settings:
<ul>
<li><code>handle</code></li>
<li><code>channel</code></li>
<li><code>vanity</code> <strong>DEPRECATED</strong></li>
<li><code>username</code> <strong>DEPRECATED</strong></li>
<li><code>playlist</code></li>
<li><code>resource</code></li>
<li><code>cache</code></li>
<li><code>fetch</code></li>
<li><code>num</code></li>
<li><code>skip</code></li>
<li><code>privacy</code></li>
<li><code>ratio</code></li>
<li><code>width</code></li>
<li><code>responsive</code></li>
<li><code>display</code></li>
<li><code>fullscreen</code></li>
<li><code>controls</code></li>
<li><code>autoplay</code></li>
<li><code>autoplay_mute</code></li>
<li><code>norel</code></li>
<li><code>playsinline</code></li>
<li><code>showtitle</code></li>
<li><code>titletag</code></li>
<li><code>showdesc</code></li>
<li><code>desclen</code></li>
<li><code>modestbranding</code></li>
<li><code>hideanno</code></li>
<li><code>goto_txt</code></li>
<li><code>popup_goto</code></li>
<li><code>link_to</code></li>
<li><code>tinymce</code></li>
<li><code>nolightbox</code></li>
<li><code>apikey</code></li>
<li><code>thumb_quality</code></li>
<li><code>timeout</code></li>
<li><code>random</code></li>
<li><code>no_thumb_title</code></li>
<li><code>class</code></li>
<li><code>target</code></li>
</ul>
</li>
<li><code>y</code> – order number of video (<code>1</code> for first, <code>2</code> for second, etc)</li>
</ul>
<p>Example:</p>
<pre><code>add_filter( 'ytc_print_video', 'customized_ytc_print_video', 10, 4 );
function customized_ytc_print_video( $video_block, $item, $instance, $y ) {
    // Do whatever you wish to do
    // ...
    return $video_block;
}
</code></pre>


My YouTube Channel

Лично мне, не хватает только комментариев видео.

Отличный плагин

Show video thumbnails or playable video block of recent YouTube Playlist, Channel (User Uploads) videos.

<p>Use this plugin when you wish to quick insert gallery grid composed from custom selected YouTube videos.</p>
<p>For automated latest or random videos collected from YouTube channel, favourites, liked videos or playlist check out <a href="https://wordpress.org/plugins/youtube-channel/" rel="ugc">My YouTube Channel</a></p>
<h4>Features</h4>
<ul>
<li>Custom set of ID’s provided as shortcode attribute <code>id</code> (single of multiple ID’s separated by comma)</li>
<li>Custom additional class for targeted styling (if you need to blend gallery in your theme)</li>
<li>Custom number of columns to distribute thumbnails to (min 1, max 8)</li>
<li>Custom set video titles as shortcode content (separate by newline or pipe)</li>
<li>Responsive thumbnails</li>
<li>Autoplay with <a href="https://dimsemenov.com/plugins/magnific-popup/" rel="nofollow ugc">Magnific PopUp</a> lightbox</li>
<li>Well marked with classes</li>
</ul>
<h4>Classes</h4>
<ul>
<li>Main container:
<ul>
<li><code>.easy_youtube_gallery</code></li>
<li><code>.col-#</code> for number of columns (default is <code>1</code>, supported up to <code>8</code>)</li>
<li><code>.ar-16_9</code> for 16:9, <code>.ar-4_3</code> for 4:3 or <code>.ar-square</code> for 1:1 aspect ratio</li>
<li>custom class provided by shortcode attribute <code>class</code></li>
</ul>
</li>
<li>Anchor:
<ul>
<li><code>.eytg-item</code></li>
<li><code>.eytg-item-#</code> for order number of item</li>
<li><code>.eytg-item-first</code> for first item in gallery block</li>
<li><code>.eytg-item-mid</code> for middle items in gallery block</li>
<li><code>.eytg-item-last</code> for last item in gallery block</li>
</ul>
</li>
<li>Title: (new in 1.0.4)
<ul>
<li><code>.eytg-title</code> for custom video title</li>
<li><code>.top</code> positioning custom video title on top of thumbnail</li>
<li><code>.bottom</code> positioning custom video title on bottom of thumbnail</li>
</ul>
</li>
<li>Thumbnail:
<ul>
<li><code>.eytg-thumbnail</code> is class for span where we set video thumbnail as background image</li>
</ul>
</li>
<li>Play icon
<ul>
<li><code>.eytg-thumbnail:before</code> is pseudoclass for play icon</li>
</ul>
</li>
</ul>
<h4>How To Use?</h4>
<p><em>Full shortcode</em></p>
<pre><code>[easy_youtube_gallery id=uMK0prafzw0,8Uee_mcxvrw,HcXNPI-IPPM,JvMXVHVr72A,AIXUgtNC4Kc,K8nrF5aXPlQ,cegdR0GiJl4,L-wpS49KN00,KbW9JqM7vho ar=16_9 cols=3 thumbnail=hqdefault controls=0 playsinline=1 privacy=1 title=top wall=1 class=mySuperClass]
Title One
Second Title
Video 3
Fourth Video
YouTube 5
Sixth YouTube
Video No. 7
Player #8
9th item
[/easy_youtube_gallery]
</code></pre>
<p><em>Basic shortcode</em></p>
<pre><code>[easy_youtube_gallery id=uMK0prafzw0,8Uee_mcxvrw,HcXNPI-IPPM cols=3]
</code></pre>
<p><strong>Please note!</strong> If you doing copy&paste from code above, before you paste content to page, post or text widget content, clear all formatting by paste&copy to/from Notepad or other plain text editor!</p>
<h4>Shortcode parameters</h4>
<ul>
<li><code>id</code> (required) single YouTube video ID or multiple ID’s separated with comma</li>
<li><code>ar</code> (optional) aspect ratio of thumbnails; default is <code>ar-16_9</code> for 16:9, but also supported <code>ar-4_3</code> for 4:3 and <code>ar-square</code> for 1:1</li>
<li><code>cols</code> (optional) for number of columns to distribute thumbnails in; devault is <code>1</code>, supported up to <code>8</code></li>
<li><code>thumbnail</code> (optional) for YouTube size of thumbnail; default is <code>hqdefault</code> but we can use:
<ul>
<li><code>0</code> have resolution 480x360px</li>
<li><code>1</code>, <code>2</code> and <code>3</code> have resolution 120x90px (first, second or third frame)</li>
<li><code>default</code> have resolution 120x90px (Default Quality)</li>
<li><code>mqdefault</code> have resolution 320x180px (Medium Quality)</li>
<li><code>hqdefault</code> have resolution 480x360px (High Quality)</li>
<li><code>sddefault</code> have resolution 640x480px (Standard Definition) and does not exists for lowres videos</li>
<li><code>maxresdefault</code> have resolution 1920x1080px (Full HD) and does not exists for lowres videos</li>
</ul>
</li>
<li><code>controls</code> (optional) to optionally hide playback controls in lightbox player (default is <code>1</code> that means “display controls”, but you can set it to <code>0</code> to hide controls)</li>
<li><code>privacy</code> (optional) enables enhanced privacy which means that YouTube won’t store information about visitors on your web page unless they play the video. (<code>0</code> or <code>1</code>)</li>
<li><code>playsinline</code> controls whether videos play inline or fullscreen in an HTML5 player on iOS. Learn more on <a href="https://developers.google.com/youtube/player_parameters?hl=en#playsinline" rel="nofollow ugc">Google Developers</a> (<code>0</code> or <code>1</code>)</li>
<li><code>class</code> (optional) to add custom style class if you wish to target specific styling for your own needs</li>
<li><code>wall</code> (optional) render video wall with player at top and thumbnails below (<code>0</code> or <code>1</code>)</li>
<li><code>title</code> (optional) set custom video titles position (<code>top</code> or <code>bottom</code>)</li>
</ul>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/EbYfwzmCVJI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>TODO</h3>
<ul>
<li>Replace MagnificPopUp with newer library</li>
<li>VisualComposer block</li>
<li>Inline player instead of opening in lightbox</li>
</ul>


Easy YouTube Gallery

Lightweight, easy to use, the shortcodes allow you to get some basic customizations.
Shortly put, perfect for my needs!

Works exactly as described

Quick and easy make gallery for custom set of YouTube videos provided in shortcode, and autoplay video on click in Magnific PopUp lightbox.

My YouTube Channel vs Easy YouTube Gallery