Display YouTube video thumbnail (with local url) in embeds

inc/config.php

@@ -1181,6 +1181,29 @@
 		)
 	);
 
+	// Youtube.js embed HTML code
+	$config['youtube_js_html'] = '<div class="video-container" data-video="$2">'.
+		'<a href="https://youtu.be/$2" target="_blank" class="file">'.
+		'<img style="width:360px;height:270px;" src="//img.youtube.com/vi/$2/0.jpg" class="post-image"/>'.
+		'</a></div>';
+
+	// To embed YouTube thumbnails locally and avoid users connecting to YouTube servers when loading threads,
+	// add the following code to your config. You will probably need to fix it for the other services.
+	/*
+	$config['youtube_js_html']
+		= '<div class="video-container" data-video="$2">'
+		. '<a href="https://youtu.be/$2" target="_blank" class="file">'
+		. '<img style="width:255px;height:190px;" src="/vi/$2/0.jpg" class="post-image"/>'
+		. '</a></div>';
+
+	$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']
+		);
+	*/
+
 	// Embedding width and height.
 	$config['embed_width'] = 300;
 	$config['embed_height'] = 246;
@@ -2091,12 +2114,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'] = '<div class="video-container" data-video="$2">'.
-		'<a href="https://youtu.be/$2" target="_blank" class="file">'.
-		'<img style="width:360px;height:270px;" src="//img.youtube.com/vi/$2/0.jpg" class="post-image"/>'.
-		'</a></div>';
-
 	// Password hashing function
 	//
 	// $5$ <- SHA256

js/youtube.js

@@ -29,16 +29,20 @@ onready(function(){
 
 	function addEmbedButton(index, videoNode) {
 		videoNode = $(videoNode);
+		var contents = videoNode.contents();
 		var videoId = videoNode.data('video');
 		var span = $("<span>[Embed]</span>");
 		var embedNode = $('<iframe style="float:left;margin: 10px 20px" type="text/html" '+
 				'width="360" height="270" src="//www.youtube.com/embed/' + videoId +
 				'?autoplay=1&html5=1" allowfullscreen frameborder="0"/>');
-		span.click(function() {
+		videoNode.click(function(e) {
+				e.preventDefault();
 			if (span.text() == ON){
+				videoNode.append(contents);
 				embedNode.remove();
 				span.text(OFF);
 			} else{
+				contents.detach();
 				videoNode.append(embedNode);
 				span.text(ON);
 			}