Scaled embedded youtube videos to maximum width

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d239d111ea2a96b9dd50f8fc2ab35d583ba703e0..2a5625b33909db6679e9df7688caba20a9736a9c 100644 (file)
--- 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 (file)
index 0000000..3780b48
--- /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 90a60de8af81e5e95804504a2123224bd07aac72..a3f06dc442d75cb6fcb309d7945a41b393c91030 100644 (file)
--- 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