diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 64cdb27f..b1547a58 100644
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -35,7 +35,7 @@
             <font-awesome-icon icon="rss" />
         </a>
 
-        <WatchOnYouTubeButton :link="`https://youtube.com/channel/${this.channel.id}`" />
+        <WatchOnYouTubeButton :id="`${this.channel.id}`" :type="'channel'" />
 
         <div class="flex mt-4 mb-2">
             <button
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index d84dea9c..821c7a2a 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -23,7 +23,7 @@
                 <a class="btn mr-1" :href="getRssUrl">
                     <font-awesome-icon icon="rss" />
                 </a>
-                <WatchOnYouTubeButton :link="`https://www.youtube.com/playlist?list=${this.$route.query.list}`" />
+                <WatchOnYouTubeButton :id="`${this.$route.query.list}`" :type="'playlist'" />
             </div>
         </div>
 
diff --git a/src/components/WatchOnYouTubeButton.vue b/src/components/WatchOnYouTubeButton.vue
index 6dea95d1..c915d41e 100644
--- a/src/components/WatchOnYouTubeButton.vue
+++ b/src/components/WatchOnYouTubeButton.vue
@@ -1,21 +1,34 @@
 <script>
 export default {
     props: {
-        videoId: String,
-        currentTime: Number,
-        playlistId: String,
-        playlistIndex: String,
+        id: String, // The id of the content.
+        type: String, // The type of the content (video, channel, playlist).
+
+        // The below parameters are only evaluated if `type` is video.
+        videoTimestamp: Number,
+        videoPlaylistId: String,
+        videoPlaylistIndex: Number,
     },
 
     computed: {
         generatedLink() {
-            let url = `https://youtu.be/watch?v=${this.videoId}`;
-            if (this.playlistId != undefined) {
-                // If this.playlistId is defined then this.playlistIndex is too.
-                url += `&list=${this.playlistId}&index=${this.playlistIndex}`;
+            switch (String(this.type)) {
+                case "video": {
+                    let url = `https://youtu.be/watch?v=${this.id}`;
+                    if (this.videoPlaylistId != undefined) {
+                        // If the playlist id is defined then the playlist index is too.
+                        url += `&list=${this.videoPlaylistId}&index=${this.videoPlaylistIndex}`;
+                    }
+                    url += `&t=${parseInt(this.videoTimestamp)}`;
+                    return url;
+                }
+                case "playlist":
+                    return `https://youtu.be/playlist?list=${this.id}`;
+                case "channel":
+                    return `https://youtu.be/channel/${this.id}`;
+                default:
+                    return `https://youtu.be/${this.id}`;
             }
-            url += `&t=${parseInt(this.currentTime)}`;
-            return url;
         },
     },
 };
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 18bbb1e2..969ddf32 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -109,10 +109,11 @@
                             <font-awesome-icon icon="rss" />
                         </a>
                         <WatchOnYouTubeButton
-                            :video-id="getVideoId()"
-                            :current-time="currentTime"
-                            :playlist-id="playlistId"
-                            :playlist-index="index"
+                            :id="getVideoId()"
+                            :type="'video'"
+                            :videoTimestamp="currentTime"
+                            :videoPlaylistId="playlistId"
+                            :videoPlaylistIndex="index"
                         />
                         <!-- Share Dialog -->
                         <button class="btn" @click="showShareModal = !showShareModal">