diff --git a/inc/config.php b/inc/config.php
index e53a5aa7..def2cd27 100644
--- a/inc/config.php
+++ b/inc/config.php
@@ -1196,13 +1196,21 @@
// It's very important that you match the entire input (with ^ and $) or things will not work correctly.
$config['embedding'] = array(
[
- '/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})$/i',
- 'VIDEO '
+ '/^(?:(?:https?:)?\/\/)?((?:www|m)\.)?(?:(?:youtube(?:-nocookie)?\.com|youtu\.be))(?:\/(?:[\w\-]+\?v=|embed\/|live\/|v\/)?)([\w\-]{11})((?:\?|\&)\S+)?$/i',
+ '
'
+ ],
+ [
+ '/^https?:\/\/(\w+\.)?youtube\.com\/shorts\/([a-zA-Z0-9\-_]{10,11})(\?.*)?$/i',
+ ''
],
- array(
- '/^https?:\/\/(\w+\.)?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
- 'VIDEO '
- ),
array(
'/^https?:\/\/(\w+\.)?vimeo\.com\/(\d{2,10})(\?.+)?$/i',
''
@@ -2015,12 +2023,6 @@
// is the absolute maximum, because MySQL cannot handle table names greater than 64 characters.
$config['board_regex'] = '[0-9a-zA-Z$_\x{0080}-\x{FFFF}]{1,58}';
- // Youtube.js embed HTML code
- $config['youtube_js_html'] = '';
-
// Slack Report Notification
$config['slack'] = false;
$config['slack_channel'] = "";
diff --git a/js/youtube.js b/js/youtube.js
index 608b5dba..4c87b0aa 100644
--- a/js/youtube.js
+++ b/js/youtube.js
@@ -1,41 +1,41 @@
/*
-* youtube
-* https://github.com/savetheinternet/Tinyboard/blob/master/js/youtube.js
-*
-* Don't load the YouTube player unless the video image is clicked.
-* This increases performance issues when many videos are embedded on the same page.
-* Currently only compatiable with YouTube.
-*
-* Proof of concept.
-*
-* Released under the MIT license
-* Copyright (c) 2013 Michael Save
-* Copyright (c) 2013-2014 Marcin Łabanowski
-*
-* Usage:
-* $config['embedding'] = array();
-* $config['embedding'][0] = array(
-* '/^https?:\/\/(\w+\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
-* $config['youtube_js_html']);
-* $config['additional_javascript'][] = 'js/jquery.min.js';
-* $config['additional_javascript'][] = 'js/youtube.js';
-*
-*/
+ * Don't load the 3rd party embedded content player unless the image is clicked.
+ * This increases performance issues when many videos are embedded on the same page.
+ *
+ * Released under the MIT license
+ * Copyright (c) 2013 Michael Save
+ * Copyright (c) 2013-2014 Marcin Łabanowski
+ * Copyright (c) 2025 Zankaria Auxa
+ *
+ * Usage:
+ * $config['embedding'] = array();
+ * $config['embedding'][0] = array(
+ * '/^https?:\/\/(\w+\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9\-_]{10,11})(&.+)?$/i',
+ * $config['youtube_js_html']);
+ * $config['additional_javascript'][] = 'js/jquery.min.js';
+ * $config['additional_javascript'][] = 'js/youtube.js';
+ */
-$(document).ready(function(){
- // Adds Options panel item
+$(document).ready(function() {
+ const ON = '[Remove]';
+ const YOUTUBE = 'www.youtube.com';
+
+ function makeEmbedNode(embedHost, videoId, width, height) {
+ return $(``);
+ }
+
+ // Adds Options panel item.
if (typeof localStorage.youtube_embed_proxy === 'undefined') {
- if (location.hostname.includes(".onion")){
- localStorage.youtube_embed_proxy = 'tuberyps2pn6dor6h47brof3w2asmauahhk4ei42krugybzzzo55klad.onion';
- } else {
- localStorage.youtube_embed_proxy = 'incogtube.com'; //default value
- }
+ localStorage.youtube_embed_proxy = 'incogtube.com'; // Default value.
}
if (window.Options && Options.get_tab('general')) {
- Options.extend_tab("general", ""+_("Media Proxy (requires refresh)")+" "
- + ('' + _('YouTube embed proxy url ')+' ')
- + ' ');
+ Options.extend_tab("general",
+ "" + _("Media Proxy (requires refresh)") + " "
+ + '' + _('YouTube embed proxy url ')
+ + ' '
+ + ' ');
$('#youtube-embed-proxy-url>input').val(localStorage.youtube_embed_proxy);
$('#youtube-embed-proxy-url>input').on('input', function() {
@@ -43,51 +43,65 @@ $(document).ready(function(){
});
}
- const ON = "[Remove]";
- const OFF = "[Embed]";
- const YOUTUBE = 'www.youtube.com';
- const PROXY = localStorage.youtube_embed_proxy;
- function addEmbedButton(index, videoNode) {
- videoNode = $(videoNode);
- var contents = videoNode.contents();
- var videoId = videoNode.data('video');
- var span = $("[Embed] ");
- var spanProxy = $("[Proxy] ");
+ const proxy = localStorage.youtube_embed_proxy;
- var makeEmbedNode = function(embedHost) {
- return $('');
- }
- var defaultEmbed = makeEmbedNode(location.hostname.includes(".onion") ? PROXY : YOUTUBE);
- var proxyEmbed = makeEmbedNode(PROXY);
- videoNode.click(function(e) {
+ function addEmbedButton(_i, node) {
+ node = $(node);
+ const contents = node.contents();
+ const embedUrl = node.data('video-id');
+ const embedWidth = node.data('iframe-width');
+ const embedHeight = node.data('iframe-height');
+ const span = $('[Embed] ');
+ const spanProxy = $("[Proxy] ");
+
+ let iframeDefault = null;
+ let iframeProxy = null;
+
+ node.click(function(e) {
e.preventDefault();
- if (span.text() == ON){
- videoNode.append(spanProxy);
- videoNode.append(contents);
- defaultEmbed.remove();
- proxyEmbed.remove();
- span.text(OFF);
+ if (span.text() == ON) {
+ contents.css('display', '');
+ spanProxy.css('display', '');
+
+ if (iframeDefault !== null) {
+ iframeDefault.remove();
+ }
+ if (iframeProxy !== null) {
+ iframeProxy.remove();
+ }
+
+ span.text('[Embed]');
} else {
- contents.detach();
+ let useProxy = e.target == spanProxy[0];
+
+ // Lazily create the iframes.
+ if (useProxy) {
+ if (iframeProxy === null) {
+ iframeProxy = makeEmbedNode(proxy, embedUrl, embedWidth, embedHeight);
+ }
+ node.prepend(iframeProxy);
+ } else {
+ if (iframeDefault === null) {
+ iframeDefault = makeEmbedNode(YOUTUBE, embedUrl, embedWidth, embedHeight);
+ }
+ node.prepend(iframeDefault);
+ }
+
+ contents.css('display', 'none');
+ spanProxy.css('display', 'none');
span.text(ON);
- spanProxy.remove();
- videoNode.append(e.target == spanProxy[0] ? proxyEmbed : defaultEmbed);
}
});
- videoNode.append(span);
- videoNode.append(spanProxy);
+ node.append(span);
+ node.append(spanProxy);
}
$('div.video-container', document).each(addEmbedButton);
-
- // allow to work with auto-reload.js, etc.
+ // Allow to work with auto-reload.js, etc.
$(document).on('new_post', function(e, post) {
$('div.video-container', post).each(addEmbedButton);
});
});
-