SparkDevNetwork
YouTube lava ShortCode does not include 'mute' required for autoplay
Is this a bug or an enhancement?
It is a bug because the current way the YouTube shortcode is presented, out-of-the-box, suggests that 'autoplay' is sufficient to provide autoplay functionality. It isn't.
It is an enhancement, because current functionality isn't 'broken.'
Your call. :)
_This may not strictly be 'Rock' functionality - but the shortcode can easily be updated. I have seen others in the Chat struggling with why autoplay doesn't work. (There is an easy workaround to this issue: copy the out-of-the-box lava and modify it yourself. But it takes a long time to work out what's wrong in the first place.) _
Description
The YouTube lava shortcode -
Description includes 'showinfo' which is deprecated, and no mention is made of mute which is needed to make autoplay work.
Parameters: id: showinfo: false controls: true autoplay: false width: 100%
The parameter 'showinfo' was deprecated in 2018. (https://developers.google.com/youtube/player_parameters)
To maintain continuity with implementations that may have calls to the [YouTube] lava shortcode that reference 'showinfo' I suggest leaving it in place, but updating the comment in the description saying "showinfo is deprecated, do not use." Leaving it in place has no impact (it just doesn't do anything).
The parameter 'autoplay' will only autoplay on chromium (and other?) browsers if the parameter 'mute=1' is also used. There is currently no way to set this in the default YouTube shortcode. (https://www.w3schools.com/html/html_youtube.asp)
( The parameter 'rel' also seems to do nothing: if the rel parameter is set to 0, related videos are supposed to come from the same channel as the video that was just played, but this doesn't seem to be happening. No impact leaving as is. )
Actual Behavior
The configuration of the YouTube lava shortcode includes a deprecated parameter (that could be removed if the removal has no impact, which my testing suggests it doesn't) and does not include mute, a parameter which allows muted autoplay on all browsers and may allow unmuted autoplay on some browsers.
Expected Behavior
There should either be no mention of showinfo, or showinfo should be commented as being deprecated because it does nothing.
Mute should be added as a parameter.
Description should read:
Basic Usage:
{[ youtube id:'8kpHK4YIwY4' ]}
Extended Usage: {[ youtube id:'8kpHK4YIwY4' width:'100%' controls:'true' autoplay:'true' mute:'true' ]}
This will put the video with the id provided onto your page in a responsive container. The id can be found in the address of the YouTube video. **Make sure you do not include any additional parameters ("&...") in the id. **
There are also a couple of options for you to add:
id (required) – The YouTube id of the video. width (100%) – The width you would like the video to be. By default it will be 100% but you can provide any width in percentages, pixels, or any other valid CSS unit of measure. showinfo (false) - deprecated, does nothing, do not use. controls (true) – This determines if the standard YouTube controls should be shown. autoplay (false) – Should the video start playing once the page is loaded? mute (true) - Muted autoplay is always allowed. Browsers may not allow autoplay if mute is false. If you have autoplay true, then set mute to true to make sure autoplay works.
Code should be adjusted as follows:
{% assign url = 'https://www.youtube.com/embed/' | Append:id | Append:'?rel=0' %}
remove showinfo - does nothing {% assign controls = controls | AsBoolean %} {% assign autoplay = autoplay | AsBoolean %} {% assign mute = mute | AsBoolean %}
...
{% if mute %} {% assign url = url | Append:'&mute=1' %} {% else %} {% assign url = url | Append:'&mute=0' %} {% endif %}
========================================================
ALTERNATIVE SOLUTION: hardcode '&mute=1' to the URL code if autoplay is true, but don't add it as a parameter. Quickest fix, but doesn't give user control over 'mute'.
======================================================== ENHANCEMENT This isn't required for this issue, but could easily be done at the same time. Adding loop is desirable because it prevents the video ending with other suggestions, and allows for repeating videos. Adding start and end gives control over what part of a video plays. Happy to put this in the 'suggestions box.' Mentioning it here for completeness.
Add the parameters: start=() - the number of seconds from the start of the video you want to play from, will start from the nearest play block. end=() - the number of seconds from the start of the video you want to end play at loop=(false) - whether the video loops.
Add the code {% assign start = start %} {% assign end = end %} {% assign loop = loop | AsBoolean %} ... {% if start != '0' %} {% assign url = url | Append:'&start=' | Append: start %} {% endif %}
{% if end != '0' %} {% assign url = url | Append:'&end=' | Append: end %} {% endif %}
{% if loop %} {% assign url = url | Append:'&loop=1&playlist=' | Append: id %} {% endif %}
*** Note that if loop=true then you must also add '&playlist=(repeat the video id)' for it to take effect. Loop=1 by itself doesn't do anything if there is only 1 video in the playlist.
Add parameters: start 0 end 0 loop false
==============================
Steps to Reproduce
View the settings and code for the YouTube lava shortcode.
Try to use it. change showinfo - it does nothing.
There is no way to get the video to autoplay.
Adding &mute=1 will allow youtube video to autoplay in mute mode, otherwise the video will not auto-play (on at least chromium browsers).
Issue Confirmation
- [X] Perform a search on the Github Issues to see if your bug or enhancement is already reported.
- [X] Reproduced the problem on a fresh install or on the demo site.
Rock Version
Version 16.5 16.5 (1.16.5.4), and pre-alpha
Client Culture Setting
Client Culture Setting: en-NZ, Browser settings Language = English (New Zealand).
