YouTube Integration Shortcode Guide
- [sw-youtube-embed] - Embed a single YouTube video / stream
- [sw-youtube] - Embed YouTube channels, playlists and livestreams
- Display YouTube Shorts
- More Advanced Shortcodes
Learn how to use the two types of YouTube Integration shortcode.
Section titled “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
Section titled “[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
Section titled “[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
Section titled “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
Section titled “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
Section titled “Full List of Shortcode Attributes and Values”Main Settings
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “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 |