YouTube Embedding

This is literally a quick mixin for Jadethat just adds a basic

+youtube("video_id", "start_time_in_seconds", "end_time_in_seconds", "width_of_player", "height_of_player", "any_extra_tags_such_as_loop_playlist_etc")

For insance, to get the video youtube.com/watch?v=4pigUJAqlfYto play on your page, you'd use

+youtube("4pigUJAqlfY", "0", "", "90vmin", "90vmin", "loop=1&playlist=4pigUJAqlfY", "[BOFU2015] 星のカービィSDXエンディング (W-L-K Full Edit) - BGA Only")

and the output would appear as you see below, complete with playlist/looping and all:

If you wanted a different video, say youtube.com/watch?v=dLapx67oHbsto play with the users uploads, you'd use

+youtube("dLapx67oHbs", "0", "", "88vmin", "49.5vmin", "list=amanbow&listType=user_uploads&loop=1", "kirby remix :: DREAM☆COCKTAIL - THE MEDLEY OF KIRBY&#39;S ADVENTURE - (fixed)")

The output would be quick and simple/easy to see:

Of course you do need to escape both quotation characters. " and ' are for " and ' respectively.

For just their uploads, it's dead easy, although it won't load a proper image and will require two user clicks to play the video, so it's not very useful. Please don't attempt for yourself:

+youtube("","","","88vmin","49.5vmin", "list=amanbow&listType=user_uploads&loop=1", "Amanbow&#39;s uploads")

At this point, why don't I just give you this guy's youtube on a stick? Good point, the idea of the website is to remove as much uselessness as possible, so I'll just give you hapianio's channel subscribe link. I don't think I could find better demonstration videos for this stuff with the variations in resolutions and aspect ratios. I do wish YouTube didn't run so horribly on lower-end PCs though.

Pros and Cons

- Pros:
- It works well
- It goes to work almost instantly
- It uses a lot less bandwidth if you don't click it - only ever uses a background and a small CSS file (currently mapped to /youtube-embed.min.css however can easily be remapped or completely embedded anyway (1 less HTTP request, so probably worth it) by changing the mixin code below, for instance, the nonminified version /youtube-embed.css.
- Cons:
- It takes more (2) taps on mobile
- Opening in a new tab will open the embed in a new tab rather than the video. Might be small for most but somewhat of a deal breaker for some

The mixin code is below.

mixin youtube(vid, start, end, width, height, extra, title)
 .youtube-container
  iframe.youtube(allowfullscreen, 
   src="https://youtube.com/embed/"+vid+"?controls=2&color=white&rel=0&start="+start+"&end="+end+"&"+extra, style="width:"+width+";height:"+height+";background-image:url(https://i.ytimg.com/vi/"+vid+"/hqdefault.jpg);" 
   srcdoc="<!DOCTYPE html><html style='height:100%' data-watch='"+vid+"'><meta name=viewport content='width=device-width'><link src='/youtube-embed.css' href='/youtube-embed.min.css' rel='stylesheet'><a href='https://youtube.com/embed/"+vid+"?controls=2&color=white&rel=0&autoplay=1&"+extra+"' style='display:block;width:100%;height:100%;'></a><a href='https://youtube.com/watch?v="+vid+"#t="+start+"' target='_blank' style='height:3em;max-height:3em;color:snow' title='"+title+"'></a></html>"
   )&attributes(attributes)

YouTube Embedding

Pros and Cons

Pros:

Cons: