YouTube widget

Your YouTube channel on your own site

The YouTube widget puts your channel, or a playlist, on your website as a grid or a slider of videos, newest first. A visitor presses play and watches right there, in YouTube's own player, without leaving your page. When you upload, the widget has the new video on its own.

It is made for one platform. If you also post on Vimeo, Twitch or TikTok and want them together, the Video Showcase mixes them, a tab each.

Add your channel or a playlist

1. Open the Videos tab in the editor. It is the first tab after Templates. At the top is a box headed Add a source as a new tab.
2. Paste your channel or a playlist. A channel page such as youtube.com/@yourname, a channel id starting with UC, or a playlist link with list= in it all work.
3. Press Add as a tab. Your newest videos appear in the preview, each with its picture, title, date and views. The tab is named after the channel; you can rename it.
4. Add more playlists, if you like. Each one becomes a tab of its own, and visitors switch between them with the tabs above the videos.

Without anything else, each channel or playlist brings its newest fifteen videos. A free YouTube API key of your own lifts that to fifty; getting a YouTube API key takes about ten minutes, and the key goes in the Settings tab. New uploads reach your site on their own a few minutes after they appear on YouTube. Refresh videos fetches them straight away.

For a tab of Shorts, set Card shape in the Video card (Design tab) to Upright, 9:16, so each Short sits in a tall card instead of a thin strip between black bars.

Each tab has a panel that opens and closes with its sources and their videos. Beside every video is a switch: turn one off and it stays in your list but leaves the widget.

Start from a template

Every YouTube widget starts from a template: a finished look you can keep as it is or change. When you make the widget on the dashboard, each template plays a short clip of itself, and Use this template opens it in the editor with your own videos in it. Every template comes as a dark and a light version, for a dark or a light page.

Changed your mind later? The Templates tab, first in the editor, shows them all again. One click puts a template on your widget straight away. Your videos, words and links stay; only the look changes, and Undo takes it back.

Two screens: Desktop and Mobile

Above the preview is a switch with two choices, Desktop and Mobile. Every setting in Layout and Design is kept for each of them separately, so a grid can have four columns on a computer and one on a phone. A tablet is drawn from the Desktop settings. Your videos are shared by both.

1. Choose the screen you want to change. Press Desktop or Mobile above the preview. The preview takes that screen's size, and every change you make from then on is for that screen only.
2. Use the same change on both, if you want. Tick Edit all screens under the preview, and a change goes to Desktop and Mobile together.

The player, and how it opens

A click on a video opens it in YouTube's own player, over your page, and starts it. Nobody is sent to another site. By default the player grows out of the video that was clicked and shrinks back into it when it closes. While the player loads, the video's picture is held with a play button on it, and the moment the video really plays the button gives a small press and fades away.

1. Open the Video player card. It is on the Design tab. While it is open, the preview shows the player, so you can see every change.
2. Choose how it opens. Under How it opens, Grows from the click is the default. At once shows the player with no motion. Visitors whose device asks for less motion always get a short fade instead of the grow.
3. Pick the play button. The Play button card sets the button on every video card: YouTube's own play mark, a circle with a triangle in your colors, a triangle alone, your own image, or none, with its size and colors.

Your files

Every picture you upload is kept in your account, not in one widget, so you can use it again anywhere. Beside each place that takes a picture, such as your own play button image, a custom logo in Social Links, or the widget background, there is a Your files button that lists everything you have uploaded before. Pick one and it is used at once, with nothing uploaded twice. Your account page shows how much space your files take.

The widget's background has its own library: on the Design tab, in Widget background, press Change background style. Add a picture or Add a video puts your own behind the videos, and once one is there, Effects for your picture offers slow movements and effects under the pointer, each with its own settings.

Buttons that say what they do

You can add your own titles, text and buttons above or below the videos, in Layout under Added titles, text and buttons, each placed with sliders. A button does one of two real things: it goes to a link you give it, or it adds an event to the visitor's calendar. Give it words that say which, such as "Subscribe on YouTube" for a link to your channel. The templates follow the same rule: no button in them promises something that will not happen.

Publish and put it on your site

1. Press Publish changes, at the top right. It lists what you changed and asks once. Publish sends it.
2. Copy the code. The window that says your widget is live has the embed code and a Copy code button. The same code is on the Settings tab, and on the dashboard as Copy embed on the widget's card.
3. Paste it once, where the widget should appear. It is a frame and a short script together; keep both. A page that already has the code picks up every later publish within a minute. Embedding on your site shows where to paste it on each website builder.

If something goes wrong

"This YouTube Widget takes YouTube only." A Vimeo, Twitch or TikTok link was pasted. It belongs in its own widget, or in a Video Showcase, which mixes platforms.

Only fifteen videos show. That is YouTube's free feed. Add your own API key on the Settings tab to show up to fifty.

A new upload is not there yet. Press Refresh videos on the Videos tab, then Publish changes.

Anything else: hello@dreamwidget.com, and tell us the widget's name.