User:K599/YouTube.js

/* Author: K599 / Kelvs599

Originally from https://crossoverwiki.miraheze.org/wiki/MediaWiki:Gadget-YouTube.js Code based on https://dev.fandom.com/wiki/MediaWiki:YoutubePlayer/code.js

Loading this JavaScript allows YouTube videos to be embedded. Go to your MediaWiki:Common.js, or wherever you're loading your JS, and either copy this page's code or insert the following line: mw.loader.load('https://meta.miraheze.org/w/index.php?title=User:K599/YouTube.js&action=raw&ctype=text/javascript');

You embed by inserting the following code: The full list of parameters is as follows:  Explanations for each parameter can be found on https://developers.google.com/youtube/player_parameters An example of a template using this can be found on https://crossoverwiki.miraheze.org/wiki/Template:YouTube Default width and height is 560x315.

mw.hook('wikipage.content').add(function($content) {   $content.find('.youtube:not(.loaded)').each(function { var $this = $(this), data = $this.data, uri = new mw.Uri('https://www.youtube.com/embed/'), width = typeof data.width === 'number' ? data.width + 'px' : String(data.width || '').trim, height = typeof data.height === 'number' ? data.height + 'px' : String(data.height || '').trim, id = String(data.id || '').trim, loop = String(data.loop || '').trim, listType = String(data.listtype || '').trim, playlist = String(data.playlist || '').trim;

uri.path += id; uri.query = { autoplay: String(data.autoplay || '').trim, loop: loop, playlist: id && loop === '1' && !playlist ? id : playlist, //if looping a single video, set playlist to id           start: String(data.start || '').trim, end: String(data.end || '').trim, listType: listType ? listType : 'playlist', list: String(data.list || '').trim };

$this.html(           $(' ', { src: uri.toString, style: 'width: ' + (width ? width : height ? 'calc(' + height + ' * 16 / 9)' : '560px') + '; height: ' + (height ? height : width ? 'calc(' + width + ' * 9 / 16)' : '315px') + ';', frameborder: '0', allowfullscreen: 'true', allow: 'fullscreen; autoplay; clipboard-write; picture-in-picture;' })       ).addClass('loaded'); }); });