Embed YouTube

src/web/app/common/views/components/url-preview.vue

@@ -1,5 +1,9 @@
 <template>
-<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
+<iframe v-if="youtubeId" type="text/html" height="250"
+	:src="`http://www.youtube.com/embed/${youtubeId}`"
+	frameborder="0"/>
+<div v-else>
+	<a class="mk-url-preview" :href="url" target="_blank" :title="url" v-if="!fetching">
 		<div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
 		<article>
 			<header>
@@ -11,7 +15,8 @@
 				<p>{{ sitename }}</p>
 			</footer>
 		</article>
-</a>
+	</a>
+</div>
 </template>
 
 <script lang="ts">
@@ -26,10 +31,18 @@ export default Vue.extend({
 			description: null,
 			thumbnail: null,
 			icon: null,
-			sitename: null
+			sitename: null,
+			youtubeId: null
 		};
 	},
 	created() {
+		const url = new URL(this.url);
+
+		if (url.hostname == 'www.youtube.com') {
+			this.youtubeId = url.searchParams.get('v');
+		} else if (url.hostname == 'youtu.be') {
+			this.youtubeId = url.pathname;
+		} else {
 			fetch('/api:url?url=' + this.url).then(res => {
 				res.json().then(info => {
 					this.title = info.title;
@@ -42,10 +55,14 @@ export default Vue.extend({
 				});
 			});
 		}
+	}
 });
 </script>
 
 <style lang="stylus" scoped>
+iframe
+	width 100%
+
 .mk-url-preview
 	display block
 	font-size 16px