Reduce the width of embedded videos
authorMarcel Werk <burntime@woltlab.com>
Sun, 28 Feb 2021 15:22:06 +0000 (16:22 +0100)
committerMarcel Werk <burntime@woltlab.com>
Sun, 28 Feb 2021 15:22:06 +0000 (16:22 +0100)
Closes #3982

com.woltlab.wcf/mediaProvider.xml
wcfsetup/install/files/lib/system/bbcode/media/provider/TwitchBBCodeMediaProvider.class.php
wcfsetup/install/files/lib/system/bbcode/media/provider/YouTubeBBCodeMediaProvider.class.php
wcfsetup/install/files/style/bbcode/video.scss

index 581a5c8d89971e65d82445a966e8be209db50e14..b6d5cf54944e9cadeb8898981d8f9fb351d3eb23 100644 (file)
@@ -9,18 +9,18 @@
                <provider name="youtube-playlist">
                        <title>YouTube Playlist</title>
                        <regex><![CDATA[https?://(?:.+?\.)?youtu(?:\.be/|be\.com/)playlist\?(?:.*?&)?list=(?P<ID>[a-zA-Z0-9_-]+)]]></regex>
-                       <html><![CDATA[<div class="videoContainer"><iframe src="https://www.youtube.com/embed/videoseries?list={$ID}" allowfullscreen></iframe></div>]]></html>
+                       <html><![CDATA[<div class="messageVideoContainer"><iframe src="https://www.youtube.com/embed/videoseries?list={$ID}" width="560" height="315" allowfullscreen></iframe></div>]]></html>
                </provider>
                <provider name="vimeo">
                        <title>Vimeo</title>
                        <regex><![CDATA[https?://vimeo\.com/(?:channels/[^/]+/)?(?P<ID>\d+)
 https?://vimeo\.com/groups/[^/]+/videos/(?P<ID>\d+)]]></regex>
-                       <html><![CDATA[<div class="videoContainer"><iframe src="https://player.vimeo.com/video/{$ID}" allowfullscreen></iframe></div>]]></html>
+                       <html><![CDATA[<div class="messageVideoContainer"><iframe src="https://player.vimeo.com/video/{$ID}" width="640" height="360" allowfullscreen></iframe></div>]]></html>
                </provider>
                <provider name="dailymotion">
                        <title>Dailymotion</title>
                        <regex><![CDATA[https?://(?:www\.)?dailymotion\.com/video/(?P<ID>[a-zA-Z0-9_-]+)]]></regex>
-                       <html><![CDATA[<div class="videoContainer"><iframe src="//www.dailymotion.com/embed/video/{$ID}"></iframe></div>]]></html>
+                       <html><![CDATA[<div class="messageVideoContainer"><iframe src="//www.dailymotion.com/embed/video/{$ID}" width="560" height="315"></iframe></div>]]></html>
                </provider>
                <provider name="github-gist">
                        <title>GitHub Gist</title>
index ec696661b10dbc87143b0203285c916ae6f914c4..965f267918b0061a70671d96570a927435ee12cb 100644 (file)
@@ -40,7 +40,7 @@ class TwitchBBCodeMediaProvider implements IBBCodeMediaProvider
         }
 
         if (!empty($src)) {
-            return '<div class="videoContainer"><iframe src="' . $src . '&amp;parent=' . self::getParent() . '&amp;autoplay=false" allowfullscreen></iframe></div>';
+            return '<div class="messageVideoContainer"><iframe src="' . $src . '&amp;parent=' . self::getParent() . '&amp;autoplay=false" width="620" height="378" allowfullscreen></iframe></div>';
         }
 
         return '';
index d88e5275d5c0a4a61330605fd51960dedd588ba0..e835a85fa7db61adca86b8702d69857612edb18a 100644 (file)
@@ -28,7 +28,7 @@ class YouTubeBBCodeMediaProvider implements IBBCodeMediaProvider
         $start = $this->timeToSeconds($startParameter);
         $end = $this->timeToSeconds($endParameter);
 
-        return '<div class="videoContainer"><iframe src="https://www.youtube-nocookie.com/embed/' . $matches['ID'] . '?wmode=transparent' . ($start ? '&amp;start=' . $start : '') . ($end ? '&amp;end=' . $end : '') . '&amp;rel=0" allowfullscreen></iframe></div>';
+        return '<div class="messageVideoContainer"><iframe src="https://www.youtube-nocookie.com/embed/' . $matches['ID'] . '?wmode=transparent' . ($start ? '&amp;start=' . $start : '') . ($end ? '&amp;end=' . $end : '') . '&amp;rel=0" width="560" height="315" allowfullscreen></iframe></div>';
     }
 
     /**
index c7a4455bf7817d0f42ad34136dc77e9ab7e6fe6d..60255e1cc4e100e1186ebd01329cc877df9a1c89 100644 (file)
@@ -13,3 +13,9 @@
                width: 100%;
        }
 }
+
+.messageVideoContainer {
+       iframe {
+               max-width: 100%;
+       }
+}