diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 6b48ccb..a54a8d6 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -65,7 +65,7 @@ export default class Channel extends Vue {
 
   @Watch("url")
   private onUrlChange() {
-    if (this.url !== undefined) {
+    if (this.url !== undefined && this.url.length > 0) {
       if (this.youtubePlayer === undefined) {
         this.youtubePlayer = YouTubePlayerFactory(this.$refs.ytpl as HTMLDivElement, {
           playerVars: {"autoplay": 0},
@@ -81,9 +81,8 @@ export default class Channel extends Vue {
           }
         });
       }
-      const videoIdMatch = this.url.match(/v=([\w_\-]+)/);
-      if (videoIdMatch !== null && videoIdMatch.length == 2) {
-        const videoId = videoIdMatch[1];
+      const videoId = Channel.extractYoutubeId(this.url);
+      if (videoId !== undefined) {
         this.state = ChannelState.LOADING;
         console.log(`Loading YouTube video "${videoId}"`);
         this.youtubePlayer.loadVideoById(videoId);
@@ -102,6 +101,13 @@ export default class Channel extends Vue {
     }
   }
 
+  private static extractYoutubeId(url: string): string | undefined {
+    const videoIdMatch = url.match(/(v=|youtu\.be\/)([^&]+)/);
+    if (videoIdMatch !== null && videoIdMatch.length == 3) {
+      return videoIdMatch[2];
+    }
+  }
+
   @Watch("volume")
   private onVolumeChange() {
     if (this.youtubePlayer) {