YouTube: quickstart, dual stream (Beta), and SE.Live setup guides

astro.config.mjs

@@ -232,6 +232,7 @@ export default defineConfig({
               ],
             },
             {
+              id: 'selive',
               label: 'SE.Live',
               link: '/selive',
               icon: 'window',
@@ -241,12 +242,15 @@ export default defineConfig({
                   { label: 'Install and connect', slug: 'selive/getting-started' },
                 ] },
                 { label: 'Guides', items: [
+                  { label: 'YouTube quickstart', slug: 'selive/guides/youtube-quickstart', badge: { text: '5 parts', variant: 'note' } },
                   { label: 'Add overlays and alerts', slug: 'selive/guides/overlays-and-alerts' },
                   { label: 'Create a vertical canvas', slug: 'selive/guides/canvas' },
                   { label: 'Manage scenes and sources', slug: 'selive/guides/scenes-and-sources' },
                   { label: 'Set up multistreaming', slug: 'selive/guides/multistreaming' },
                   { label: 'Twitch dual format', slug: 'selive/guides/twitch-dual-format' },
+                  { label: 'YouTube dual stream', slug: 'selive/guides/youtube-dual-stream', badge: { text: 'Beta', variant: 'caution' } },
                   { label: 'Save replays with Backtrack', slug: 'selive/guides/backtrack' },
+                  { label: 'YouTube setup', slug: 'selive/guides/youtube-setup' },
                   { label: 'All guides', slug: 'selive/guides' },
                 ] },
                 { label: 'Troubleshooting', slug: 'selive/troubleshooting' },
@@ -342,6 +346,7 @@ export default defineConfig({
           ],
           {
             exclude: ['/', '/404'],
+            topics: { selive: ['/selive/guides/youtube-quickstart/**'] },
           },
         ),
       ],

src/content/docs/selive/guides/index.mdx

@@ -1,10 +1,17 @@
 ---
 title: SE.Live guides
-description: Guides for SE.Live overlays, multistreaming, canvases, linked scenes, Backtrack, and Twitch dual format.
+description: Guides for SE.Live overlays, multistreaming, canvases, linked scenes, Backtrack, and dual format streaming on Twitch and YouTube.
 ---
 
 import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 
+## Platform setup
+
+<CardGrid>
+  <LinkCard title="YouTube quickstart" href="/selive/guides/youtube-quickstart" description="Set up your YouTube account, overlay, OBS, and chatbot." />
+  <LinkCard title="Set up SE.Live for YouTube" href="/selive/guides/youtube-setup" description="Connect your account, stream key, overlay, and chatbot for YouTube." />
+</CardGrid>
+
 ## Build your scenes
 
 <CardGrid>
@@ -18,6 +25,7 @@ import { CardGrid, LinkCard } from '@astrojs/starlight/components';
 <CardGrid>
   <LinkCard title="Set up multistreaming" href="/selive/guides/multistreaming" description="Configure outputs and confirm each platform is live." />
   <LinkCard title="Stream in dual format on Twitch" href="/selive/guides/twitch-dual-format" description="Send horizontal and vertical layouts to Twitch together." />
+  <LinkCard title="Stream with YouTube dual stream (Beta)" href="/selive/guides/youtube-dual-stream" description="Send horizontal and vertical versions of your YouTube stream together." />
   <LinkCard title="Save replays with Backtrack" href="/selive/guides/backtrack" description="Enable a replay buffer for a custom canvas and set a save hotkey." />
 </CardGrid>
 

src/content/docs/selive/guides/multistreaming.mdx

@@ -33,6 +33,6 @@ TikTok requires LIVE access before you can stream to it.
 
 To stop one output while the others keep streaming, turn off its toggle in the Multistreaming panel.
 
-For horizontal and vertical streams on Twitch, use [Twitch dual format](/selive/guides/twitch-dual-format).
+For horizontal and vertical streams on Twitch, use [Twitch dual format](/selive/guides/twitch-dual-format). On YouTube, use [YouTube dual stream](/selive/guides/youtube-dual-stream).
 
 [More about multistreaming](https://support.streamelements.com/hc/en-us/articles/18771457842066-SE-Live-The-Complete-Guide-Setup-Features-Multistreaming-Troubleshooting).

src/content/docs/selive/guides/youtube-dual-stream.mdx

@@ -0,0 +1,99 @@
+---
+title: YouTube dual stream (Beta)
+description: "Send horizontal and vertical versions of your YouTube stream together with SE.Live and YouTube's dual stream feature."
+platforms: [youtube]
+keywords:
+  - YouTube dual stream
+  - YouTube vertical streaming
+  - SE.Live vertical YouTube
+  - YouTube Shorts live stream
+---
+
+import GuideScreenshot from '../../../../components/GuideScreenshot.astro';
+import profileMenu from '../img/youtube-profile-menu.png';
+import contentLive from '../img/youtube-studio-content-live.png';
+import dualStreamToggle from '../img/youtube-dual-stream-toggle.png';
+import verticalEncoderKey from '../img/youtube-vertical-encoder-key.png';
+import multistreamDock from '../img/selive-multistream-dock.png';
+
+With YouTube's dual stream, one broadcast can carry both a horizontal and a vertical version of your stream. YouTube shows each viewer the version that matches the format they're watching in, so you reach desktop and mobile viewers without running two separate streams.
+
+In SE.Live, you send each format from its own output and connect both to the same scheduled stream in YouTube Studio.
+
+:::caution[Beta feature]
+Dual stream isn't fully integrated into SE.Live yet, so some steps below are manual. We're working with YouTube to streamline the experience for both streamers and viewers.
+:::
+
+## Before you begin
+
+- [Install SE.Live](/selive/getting-started) and connect your YouTube channel.
+- Enable live streaming on your YouTube channel.
+- [Create a vertical canvas](/selive/guides/canvas) for your vertical layout. YouTube channels get a horizontal and a vertical output in the Multistream dock. See [Set up multistreaming](/selive/guides/multistreaming).
+
+## Set up the stream in YouTube Studio
+
+### 1. Create a scheduled stream
+
+Open **YouTube Studio** from your profile menu.
+
+<GuideScreenshot src={profileMenu} alt="YouTube profile menu with YouTube Studio highlighted." caption="Select YouTube Studio from your profile menu." width={370} />
+
+In the left menu, select **Content**, open the **Live** tab, and click **Get started** to schedule a stream.
+
+<GuideScreenshot src={contentLive} alt="YouTube Studio channel content page with Content in the sidebar, the Live tab, and the Get started button highlighted." caption="Go to Content, open the Live tab, and click Get started." />
+
+### 2. Open the stream settings
+
+Open your scheduled stream and select the **Stream settings** tab. Make sure **Dual stream** is turned on. It lets you connect a vertical stream from your encoder, or have YouTube generate a vertical cropped version for the Shorts feed.
+
+<GuideScreenshot src={dualStreamToggle} alt="YouTube Studio Stream settings tab with the Dual stream toggle turned on." caption="Turn on Dual stream in the stream settings." />
+
+### 3. Set the vertical stream to use an encoder
+
+In the vertical stream panel, change the source to **Encoder** and select your vertical stream key. The horizontal stream keeps using the default stream key.
+
+<GuideScreenshot src={verticalEncoderKey} alt="YouTube Studio live control room with the default stream key for the horizontal stream and the Encoder and vertical stream key selectors for the vertical stream highlighted." caption="Horizontal uses the default stream key. Set the vertical stream to Encoder and pick its key." />
+
+## Go live from SE.Live
+
+### 4. Enable the main output
+
+In the **Multistream** dock in SE.Live, turn on your main YouTube output, the horizontal one with the desktop icon.
+
+<GuideScreenshot src={multistreamDock} alt="SE.Live Multistream dock with the horizontal YouTube output turned on and the vertical YouTube output turned off." caption="Turn on the horizontal output first. The vertical output, with the phone icon, stays off for now." width={339} />
+
+### 5. Start the stream in SE.Live
+
+Start your stream in SE.Live. When prompted, choose the scheduled stream you created in step 1.
+
+### 6. Enable the second output
+
+In the Multistream dock, turn on the vertical output, the one with the phone icon.
+
+### 7. Choose the same scheduled stream
+
+When SE.Live prompts you to start the vertical output, choose the same scheduled stream you picked in step 5. Both outputs must use the same scheduled stream.
+
+### 8. Go live in YouTube Studio
+
+Once both outputs are connected, click **Go Live** in YouTube Studio. Each preview in YouTube Studio shows **No data** until its output connects.
+
+## End the stream
+
+### 9. End the stream in YouTube Studio
+
+End your broadcast in **YouTube Studio** first.
+
+### 10. End the stream in SE.Live
+
+Then end the stream in **SE.Live**.
+
+## Get help
+
+[Get help with dual stream setup](https://support.streamelements.com/hc/en-us/requests/new).
+
+## Related
+
+- [Create a vertical canvas](/selive/guides/canvas)
+- [Set up multistreaming](/selive/guides/multistreaming)
+- [Stream in dual format on Twitch](/selive/guides/twitch-dual-format)

src/content/docs/selive/guides/youtube-quickstart/build-your-overlay.mdx

@@ -0,0 +1,67 @@
+---
+title: "YouTube Quickstart: Build Your Overlay"
+sidebar:
+  label: "3. Build Your Overlay"
+description: "Create a YouTube overlay from a theme or a blank canvas, then add Super Chat alerts."
+platforms: [youtube]
+prev:
+  link: /selive/guides/youtube-quickstart/dashboard-tour
+  label: "2. Dashboard Tour"
+next:
+  link: /selive/guides/youtube-quickstart/connect-obs-and-go-live
+  label: "4. Connect OBS and Go Live"
+keywords:
+  - StreamElements YouTube overlay
+  - StreamElements AlertBox YouTube
+  - YouTube Super Chat alert
+---
+
+import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Part 3 of 5 · [All steps](/selive/guides/youtube-quickstart)
+
+An overlay adds graphics and alerts to your stream. If yours is ready, continue to [4. Connect OBS and Go Live](/selive/guides/youtube-quickstart/connect-obs-and-go-live).
+
+## Create an overlay
+
+To use a theme:
+
+<Steps>
+
+1. Go to the [Themes Gallery](https://streamelements.com/dashboard/themes) and open the **Theme** tab.
+2. Choose the **YouTube Theme**. Use the static version to reduce CPU usage.
+3. Click **Create** and give it a name.
+
+</Steps>
+
+![Overlay themes in the Themes Gallery](/img/youtube-quickstart/overlay-gallery.jpg)
+
+To start with a blank overlay, go to [Overlays](https://streamelements.com/dashboard/overlays) and click **New overlay**. Choose a resolution that matches your stream, such as 1920x1080, then click **Start**. If you saved an overlay during account setup, you can open that one instead.
+
+![Empty My Overlays page with the New overlay button](/img/youtube-quickstart/my-overlays.jpg)
+
+## Set up your AlertBox for Super Chats
+
+The AlertBox displays alerts on your stream. Open your overlay and select its AlertBox. If it doesn't have one yet, click **+** in the editor and choose **Alerts → AlertBox**.
+
+![Overlay editor with the widget picker open](/img/youtube-quickstart/overlay-editor.jpg)
+
+Open the AlertBox settings and enable **SuperChat**.
+
+:::note[Subscriber and membership alerts]
+New subscribers and memberships don't trigger AlertBox alerts on YouTube. Leave those alert types unchecked.
+:::
+
+Save the overlay. You'll add its URL to OBS next.
+
+## Next
+
+<CardGrid>
+  <LinkCard title="4. Connect OBS and Go Live" href="/selive/guides/youtube-quickstart/connect-obs-and-go-live" description="Install SE.Live, connect your YouTube account, and add this overlay to your scene." />
+</CardGrid>
+
+## Related
+
+<CardGrid>
+  <LinkCard title="Getting Started with Overlays" href="/overlays/getting-started" description="Add an AlertBox or Custom Widget in the Overlay Editor." />
+</CardGrid>

src/content/docs/selive/guides/youtube-quickstart/connect-obs-and-go-live.mdx

@@ -0,0 +1,152 @@
+---
+title: "YouTube Quickstart: Connect OBS and Go Live"
+sidebar:
+  label: "4. Connect OBS & Go Live"
+description: "Install SE.Live, connect YouTube to OBS, add your camera, microphone, and overlay, and start streaming."
+platforms: [youtube]
+prev:
+  link: /selive/guides/youtube-quickstart/build-your-overlay
+  label: "3. Build Your Overlay"
+next:
+  link: /selive/guides/youtube-quickstart/set-up-your-chatbot
+  label: "5. Set Up Your Chatbot"
+keywords:
+  - SE.Live YouTube setup
+  - StreamElements YouTube stream key
+  - connect OBS to YouTube
+---
+
+import { Steps, CardGrid, LinkCard } from '@astrojs/starlight/components';
+
+Part 4 of 5 · [All steps](/selive/guides/youtube-quickstart)
+
+Connect OBS to YouTube and add your overlay as a browser source. If you're already streaming with your overlay, continue to [5. Set Up Your Chatbot](/selive/guides/youtube-quickstart/set-up-your-chatbot).
+
+## Install SE.Live
+
+SE.Live is a StreamElements plugin that adds chat, the Activity Feed, and stream controls to OBS.
+
+**Requirements:** OBS Studio 31.x or newer. SE.Live is available for Windows, with a macOS beta.
+
+![Desktop Apps page with the SE.Live download](/img/youtube-quickstart/desktop-apps.jpg)
+
+<Steps>
+
+1. Download the installer for your operating system from the [SE.Live page](https://streamelements.com/selive). Choose the Mac beta for macOS.
+2. Close OBS, then run the installer and choose your install folder.
+3. Reopen OBS. On Windows, run it **as Administrator**. Look for the **StreamElements** menu in the menu bar.
+
+</Steps>
+
+## Connect your channel to SE.Live
+
+The first time SE.Live opens in OBS, it asks you to connect a channel.
+
+![SE.Live channel sign-in options in OBS](/img/youtube-quickstart/connect-channel.webp)
+
+<Steps>
+
+1. Click **YOUTUBE**, sign in with Google, and select your channel.
+2. On the **I'd like to start with...** screen, choose **New setup**. To stream to several platforms, choose **Multi-streaming Setup** and follow the [multistreaming guide](/selive/guides/multistreaming).
+
+</Steps>
+
+![SE.Live welcome screen with New setup and Multi-streaming Setup options](/img/youtube-quickstart/setup-wizard-start.png)
+
+## Run the setup wizard
+
+The **New setup** wizard adds your microphone, camera, and display capture to OBS.
+
+<Steps>
+
+1. **Camera & microphone.** Select your devices, or choose **No camera**. Click **Next**.
+
+   ![Microphone and camera selection in the setup wizard](/img/youtube-quickstart/wizard-camera-mic.png)
+
+2. **Display capture.** Select the display you want to stream and click **Next**. You can switch to game capture later.
+
+   ![Display selection in the setup wizard](/img/youtube-quickstart/wizard-display-capture.png)
+
+3. Click **Finish setup**.
+
+</Steps>
+
+![Finish setup button on the last wizard screen](/img/youtube-quickstart/wizard-finish.png)
+
+## Connect OBS to YouTube
+
+In OBS, open **Settings → Stream**, choose **YouTube - RTMPS**, and click **Connect Account**. Follow the Google sign-in prompts and select the channel you want to stream to. If OBS already shows the correct channel, keep that connection.
+
+### Use a stream key instead
+
+If you connected your YouTube account in OBS, skip this step. To connect with a stream key instead:
+
+<Steps>
+
+1. In [YouTube Studio](https://studio.youtube.com/), select **Create → Go Live** and open the **Stream** tab. Create a stream if you don't have one yet, then copy its stream key.
+2. In OBS, open **Settings → Stream**, choose **YouTube - RTMPS**, and select **Use Stream Key**. Paste the key and save your settings.
+
+</Steps>
+
+:::caution[Keep your stream key private]
+Anyone with your stream key can stream to your channel. Don't share it or show it on stream.
+:::
+
+## Add your overlay
+
+<Steps>
+
+1. Open **My Overlays** in StreamElements. Find the [overlay you created earlier](/selive/guides/youtube-quickstart/build-your-overlay), open its menu, and select **Copy URL**.
+2. In OBS **Sources**, click **+ → Browser**, name the source, and paste the URL.
+3. Set **Width** and **Height** to match your overlay (`1920` and `1080` if you used the default resolution). Check **Shutdown when source not visible** and click **OK**.
+
+</Steps>
+
+## Open chat and stream controls
+
+Open **StreamElements → SE.Live Docks** and choose the panels you want to show.
+
+**Canvas** shows a preview and scene list for a [canvas](/selive/guides/canvas), including vertical layouts.
+
+![Canvas dock with a vertical preview and scene list](/img/youtube-quickstart/canvas-dock.png)
+
+**YouTube Chat** shows chat messages while you're live. It also links to **Live Video Settings** and the **Live Dashboard**.
+
+![YouTube Chat dock before the stream starts](/img/youtube-quickstart/youtube-chat-dock.png)
+
+**Multi-Streaming** lists your connected destinations. Turn each destination on or off before you go live.
+
+![Multi-Streaming dock with two YouTube destinations enabled](/img/youtube-quickstart/multistreaming-dock.png)
+
+**Activity Feed** shows the same events and alert controls as the [dashboard feed](/selive/guides/youtube-quickstart/dashboard-tour#the-activity-feed).
+
+![Activity Feed dock with alert controls and no recent events](/img/youtube-quickstart/activity-feed-dock.png)
+
+Drag the panels to arrange them around your OBS preview.
+
+![OBS preview surrounded by Activity Feed, Canvas, Multi-Streaming, and YouTube Chat docks](/img/youtube-quickstart/obs-docks-layout.webp)
+
+## Go live
+
+<Steps>
+
+1. If you connected your YouTube account, use **Manage Broadcast** to create or select a broadcast. If you used a stream key, open that stream in YouTube Studio. Check the title, category, and privacy setting before starting.
+2. Click **Start Streaming** in OBS. Depending on your broadcast settings, you may also need to click **Go Live** in YouTube Studio. Check YouTube to confirm the stream is live.
+
+</Steps>
+
+See the [OBS YouTube guide](https://obsproject.com/forum/resources/how-to-stream-to-youtube-with-obs-studio.232/) for account connection options and [YouTube's encoder guide](https://support.google.com/youtube/answer/2907883) for stream key setup.
+
+## Next
+
+<CardGrid>
+  <LinkCard title="5. Set Up Your Chatbot" href="/selive/guides/youtube-quickstart/set-up-your-chatbot" description="Add the bot as a moderator and create your first command." />
+</CardGrid>
+
+## Related
+
+<CardGrid>
+  <LinkCard title="Install and connect SE.Live" href="/selive/getting-started" description="Install SE.Live and use its menus, docks, and backups." />
+  <LinkCard title="SE.Live troubleshooting" href="/selive/troubleshooting" description="Fix missing docks, login problems, and crashes." />
+  <LinkCard title="Set up multistreaming" href="/selive/guides/multistreaming" description="Stream to YouTube and other platforms at the same time." />
+</CardGrid>