Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Youtube embedding options #170

Open
8 tasks
mariobehling opened this issue Jul 24, 2024 · 3 comments
Open
8 tasks

Add support for Youtube embedding options #170

mariobehling opened this issue Jul 24, 2024 · 3 comments
Assignees
Labels

Comments

@mariobehling
Copy link
Member

mariobehling commented Jul 24, 2024

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

Screenshot from 2024-07-24 15-06-08

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
Copy link
Member Author

Please also implement the switch buttons.

@mariobehling
Copy link
Member Author

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/
    Screenshot from 2024-08-05 00-35-58

  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

Screenshot from 2024-08-05 00-39-48

@untari
Copy link
Contributor

untari commented Aug 5, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants