Add support for Youtube embedding options

[mariobehling]

Add support for Youtube embedding options as switch boxes below the YouTube Video ID form field.

• [ ] Loop
• [ ] Autostart
• [ ] Mute
• [ ] Modest branding
• [ ] Hide controls
• [ ] Hide titles and uploader info
• [ ] Don`t show related info at the end
• [ ] Use Nocookie Domain

Add the following options:

• modest branding: Here's an example of how to embed a YouTube video with the modestbranding parameter:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?modestbranding=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

• add option for YouTube's Nocookie Domain

You can also use YouTube's nocookie domain to enhance privacy and still use the modestbranding parameter to remove the logo:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID?modestbranding=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

To further customize the embed, you add the option for the following parameters:

• Hide controls: controls=0: Hides the video player controls.
• Hide titles and uploader info: showinfo=0: Hides the video title and uploader information (note: this parameter was deprecated but can still be found in some older embeds).
• Dont show related info at the end:rel=0`: Prevents showing related videos at the end of your video (only shows related videos from the same channel as of September 2018).

Example with additional parameters:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/VIDEO_ID?modestbranding=1&controls=0&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

• To loop and autostart a YouTube video,
• autoplay=1: This parameter will make the video start playing automatically when the page loads.
• loop=1: This parameter will loop the video.
• playlist=VIDEO_ID: This parameter is necessary for the loop to work properly. You need to set the playlist parameter to the same video ID as the video you want to loop.
• mute=1: Mutes the video (useful because some browsers do not allow autoplay with sound).

Example Embed Code

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&loop=1&playlist=VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Example with Additional Parameters

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&loop=1&playlist=dQw4w9WgXcQ&controls=0&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[mariobehling]

Please also implement the switch buttons.

[mariobehling]

Hi @untari

1. Enabling "Autostart" results in the video starting from the beginning of the livestream instead of showing the video at the actual live time. Compare: https://video-dev.eventyay.com/rooms/77b6e3b4-2380-41a7-bb50-1732c998425d/

2. It also does not do what it is supposed to do: The stream does not start automatically. Is the reason that there is a conflict with the profile option? There is an option to start livestreams automatically, but it also does not work with actual livestreams (only works with recorded videos). Compare: https://wikimania-live.eventyay.com/preferences

[untari]

@mariobehling I will look into whether there's a conflict with the profile option or another cause. We'll work on fixing this