diff --git a/package.json b/package.json
index 03bb4796ed..3b40ed1767 100644
--- a/package.json
+++ b/package.json
@@ -191,7 +191,7 @@
 		"style-loader": "0.22.1",
 		"stylus": "0.54.5",
 		"stylus-loader": "3.0.2",
-		"summaly": "2.1.3",
+		"summaly": "2.1.4",
 		"systeminformation": "3.42.9",
 		"syuilo-password-strength": "0.0.1",
 		"textarea-caret": "3.1.0",
diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue
index 95dafa8f4c..be69012737 100644
--- a/src/client/app/common/views/components/url-preview.vue
+++ b/src/client/app/common/views/components/url-preview.vue
@@ -1,5 +1,7 @@
 <template>
-<iframe v-if="player" :src="player" heigth="250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
+<div v-if="player.url" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+	<iframe :src="player.url" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen />
+</div>
 <div v-else-if="tweetUrl && detail" class="twitter">
 	<blockquote ref="tweet" class="twitter-tweet" :data-theme="$store.state.device.darkmode ? 'dark' : null">
 		<a :href="url"></a>
@@ -46,7 +48,11 @@ export default Vue.extend({
 			thumbnail: null,
 			icon: null,
 			sitename: null,
-			player: null,
+			player: {
+				url: null,
+				width: null,
+				height: null
+			},
 			tweetUrl: null,
 			misskeyUrl
 		};
@@ -170,9 +176,17 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-iframe
+.twitter
+	position relative
 	width 100%
 
+	> iframe
+		height 100%
+		left 0
+		position absolute
+		top 0
+		width 100%
+
 root(isDark)
 	> a
 		display block