From 9512054b2f703d08b0d935a7bc26c10ea8b36b61 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Mon, 23 May 2016 15:56:24 +0200
Subject: [PATCH] Scaled embedded youtube videos to maximum width

---
 CHANGELOG.md                                   |  1 +
 wcfsetup/install/files/style/bbcode/video.scss | 12 ++++++++++++
 wcfsetup/setup/db/install.sql                  |  4 ++--
 3 files changed, 15 insertions(+), 2 deletions(-)
 create mode 100644 wcfsetup/install/files/style/bbcode/video.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d239d111ea..2a5625b339 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -51,6 +51,7 @@
 * Improved confirmation messages (`<span class="confirmationObject">...</span>`)
 * Added users online list pagination
 * Added support for embedded youtube playlists
+* Scaled embedded youtube videos to maximum width
 
 #### CMS
 
diff --git a/wcfsetup/install/files/style/bbcode/video.scss b/wcfsetup/install/files/style/bbcode/video.scss
new file mode 100644
index 0000000000..3780b48090
--- /dev/null
+++ b/wcfsetup/install/files/style/bbcode/video.scss
@@ -0,0 +1,12 @@
+/* scale embedded videos to maximum width */
+.videoContainer {
+	overflow: hidden;
+	padding-bottom: 56.25%; /* 9 / 16 */
+	position: relative;
+	
+	iframe {
+		height: 100%;
+		position: absolute;
+		width: 100%;
+	}
+}
diff --git a/wcfsetup/setup/db/install.sql b/wcfsetup/setup/db/install.sql
index 90a60de8af..a3f06dc442 100644
--- a/wcfsetup/setup/db/install.sql
+++ b/wcfsetup/setup/db/install.sql
@@ -2099,9 +2099,9 @@ INSERT INTO wcf1_style_variable (variableName, defaultValue) VALUES ('wcfTooltip
 -- media providers
 -- Videos
 	-- Youtube
-	INSERT INTO wcf1_bbcode_media_provider (title, regex, html) VALUES ('YouTube', 'https?://(?:.+?\\.)?youtu(?:\\.be/|be\\.com/(?:#/)?watch\\?(?:.*?&)?v=)(?P<ID>[a-zA-Z0-9_-]+)(?:(?:\\?|&)t=(?P<start>\\d+)$)?', '<iframe style="max-width:100%;" width="560" height="315" src="https://www.youtube.com/embed/{$ID}?wmode=transparent&amp;start={$start}" allowfullscreen></iframe>');
+	INSERT INTO wcf1_bbcode_media_provider (title, regex, html) VALUES ('YouTube', 'https?://(?:.+?\\.)?youtu(?:\\.be/|be\\.com/(?:#/)?watch\\?(?:.*?&)?v=)(?P<ID>[a-zA-Z0-9_-]+)(?:(?:\\?|&)t=(?P<start>\\d+)$)?', '<div class="videoContainer"><iframe src="https://www.youtube.com/embed/{$ID}?wmode=transparent&amp;start={$start}" allowfullscreen></iframe></div>');
 	-- Youtube playlist
-	INSERT INTO wcf1_bbcode_media_provider (title, regex, html) VALUES ('YouTube Playlist', 'https?://(?:.+?\\.)?youtu(?:\\.be/|be\\.com/)playlist\\?(?:.*?&)?list=(?P<ID>[a-zA-Z0-9_-]+)', '<iframe style="max-width:100%;" width="560" height="315" src="https://www.youtube.com/embed/videoseries?list={$ID}" allowfullscreen></iframe>');
+	INSERT INTO wcf1_bbcode_media_provider (title, regex, html) VALUES ('YouTube Playlist', 'https?://(?:.+?\\.)?youtu(?:\\.be/|be\\.com/)playlist\\?(?:.*?&)?list=(?P<ID>[a-zA-Z0-9_-]+)', '<div class="videoContainer"><iframe src="https://www.youtube.com/embed/videoseries?list={$ID}" allowfullscreen></iframe></div>');
 	-- Vimeo
 	INSERT INTO wcf1_bbcode_media_provider (title, regex, html) VALUES ('Vimeo', 'https?://vimeo\\.com/(?P<ID>\\d+)', '<iframe src="https://player.vimeo.com/video/{$ID}" width="400" height="225" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>');
 	-- MyVideo
-- 
2.20.1