YouTube Integration Shortcode Guide

Learn how to use the two types of YouTube Integration shortcode.

The StreamWeasels YouTube Integration plugins offer two types of shortcodes to embed YouTube content on your website. Let's explore how to use them.


[sw-youtube-embed] Shortcode

Does not require a YouTube API key configured in the settings

The [sw-youtube-embed] shortcode allows you to embed a single YouTube video with custom options. You can use this shortcode when you want to display a specific YouTube video on your website.

To use the [sw-youtube-embed] shortcode, you can specify various parameters within the shortcode. Here's an example of how you can use it:

[sw-youtube-embed id="QQKCuSG2eHQ"]

Replace "QQKCuSG2eHQ" with the desired YouTube Video ID, which you can find on the end of any YouTube video URL, that looks something like this: ?v=QQKCuSG2eHQ


[sw-youtube] Shortcode

Requires a YouTube API key configured in the settings

The [sw-youtube] shortcode provides an advanced YouTubeintegration that allows you to embed multiple videos and streams in various layouts. This shortcode gives you the flexibility to create dynamic and interactive YouTube displays on your site. It utilizes the settings you have configured on the main YouTube Integration settings page.

To use this shortcode, simply add [sw-youtube] to your content where you want the YouTube integration to appear. The plugin will automatically insert the YouTube integration according to your chosen settings. For example:

[sw-youtube layout="wall"]

Display YouTube Shorts

You can use StreamWeasels YouTube Integration to display YouTube shorts. To do that, simply set the layout on the shortcode to showcase .

[streamweasels-youtube channel="UCAuUUnT6oDeKwE6v1NGQxug" layout="showcase"]


This will embed a YouTube Shorts Showcase, displaying 6 shorts from a single YouTube channel. You can upgrade to PRO to enable left / right arrows and display up to 50 shorts.

StreamWeasels YouTube Integration has over 30 settings. Each and every setting can be added to your shortcodes for fine, granular control. You can find a list of those attributes and settings for each plugin below.


More Advanced Shortcodes

Using the settings on the Main Settings Page works great if you are simply going to use one YouTube Integration on your site. Configure your settings, add your simple shortcode [sw-youtube] and then you're done.

But what if you want to have multiple YouTube Integrations on your site? Maybe you want to have 2 or 3 on a single page, or you want to have one on multiple different pages with different settings? That's where the shortcode attributes and values come in.

If you want to use multiple different integrations with custom settings on each throughout your site, you will have to set these custom variables in the shortcode. For example;

[streamweasels-youtube channel="UCAuUUnT6oDeKwE6v1NGQxug" autoplay="1"]

This will embed a YouTube Wall Integration with 1 YouTube channel with autoplay enabled.


Full List of Shortcode Attributes and Values

Main Settings

Field Attribute Values Description
Channel ID
channel="" YouTube Channel ID (get ID here)
Pulls all videos from YouTube channel
Playlist ID
playlist="" YouTube playlist ID
Pull all videos from a YouTube playlist
Livestream ID
livestream="" Input list of channel IDs separated by comma (no space required)
Pulls all live streams from channels defined
Limit
limit="" Number up to 50
Limits number of videos to this number
Pagination
pagination="" 1
Display next / previous page buttons
0 Hide next / previous page buttons

Layout Settings

Field Attribute Values Description
layout layout="" wall Use the classic wall layout to display YouTube content


showcase Use the showcase layout to display YouTube shorts


player Use the player layout to focus on the embedded experience


feature Use the feature layout to highlight special content on your page

Embed Settings

Field Attribute Values Description
Embed embed="" page Embed the YouTube content directly on the page
Start Muted
embed-muted="" 1 Start embedded content muted
0 Start embedded content with sound

Livestream Settings

Field Attribute Values Description
Show Offline Streams
show-offline="" 1
Show offline streams in list
0
Only show online streams in list
Offline Message
show-offline-text="" Custom Text
Display Custom message when ALL streams are offline
Offline Image
show-offline-image="" Image URL
Display Image when ALL streams are offline

Autoplay Settings

Field Attribute Values Description
Autoload Stream
autoload="" 1
Display the YouTube embed for the top video
0
Do not display the YouTube embed for the top video
Autoplay Stream autoplay="" 1 Autoplay the YouTube embed for the top video
0 Do not autoplay the YouTube embed for the top video

Appearance Settings

Field Attribute Values Description
Title title="" Custom Text
Add your own title to embedded content
Subtitle subtitle="" Custom Text
Add your own subtitle to embedded content
Custom Logo
logo-image="" Image URL
Display a custom logo on each video
Logo Background Colour
logo-bg-colour="" Colour Hex Code
Add Background colour to logo
Logo Border Colour
logo-border-colour="" Colour Hex Code
Add border colour to logo
Max Width
max-width Custom number of pixels
set maximum width of content

Tile Settings

Field Attribute Values Description
Tile Layout
tile-layout="" detailed
Tile showing channel preview, channel name, logo and background colour
compact
Tile without background colour or profile logo
 Tile Sorting
tile-sorting="" most
Order tiles from most viewed first then descending
least Order tiles from least viewed first then ascending
 

alpha
Order tiles alphabetically by channel name
random
Order tiles randomly
Background Colour
tile-background-colour="" Colour Hex Code
Background colour for tiles.
Title Colour
tile-title-colour="" Colour Hex Code
Set colour of channel title on tile
Subtitle Colour
subtitle-colour="" Colour Hex Code
Set colour of channel subtitle on tile
Rounded Corners
tile-rounded-corners="" Number Set pixel value for rounded corners, recommended between 5 - 40

Hover Settings

Field Attribute Values Description
Hover Effect
hover-effect="" None No Hover effect
youtube
YouTube style drop shadow effect on hover
play
Play button effect on hover
Hover Colour
hover-colour="" Colour Hex Code
Colour used with YouTube Hover effect for drop shadow