Youtube Revslider sound not working

3 replies · opened Oct 5, 2023

UuschiOct 5, 2023

My Youtube video that has sound does not play. These are the settings:
<div class="rs-background-video-layer"
data-forcerewind="on"
data-volume="100"
data-ytid="fZV8mULQf2k"
data-videoattributes="version=3&enablejsapi=1&html5=1&hd=1&wmode=opaque&showinfo=0&rel=0&orgin=https://mvranchforsale.com"
data-videorate="1"
data-videowidth="100%"
data-videoheight="100%"
data-videocontrols="none"
data-videostartat="00:06"
data-videoendat="02:40"
data-videoloop="loop"
data-forceCover="1"
data-aspectratio="4:3"
data-autoplay="true"
data-autoplayonlyfirsttime="false"
data-nextslideatend="true"></div>

When I change the data-volume="100" to data-volume="mute" the video will play but one I add a number to this line the video stops playing.
Any suggestions?

SSemicolon WebSTAFFOct 6, 2023

Hello,

This is due to Browser’s AutoPlay Policy: https://developer.chrome.com/blog/autoplay/. So currently, if you want AutoPlay Video, you will have to keep them muted. This is applicable on all Browsers.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

UuschiOct 17, 2023

I had to embed the youtube video into the header without the revslider script. When viewing the website on a mobile device, the youtube video is below the header. Is there a way to fix this so that the video is below the navigation header?

https://mvranchforsale.com

SSemicolon WebSTAFFOct 19, 2023

Hello,

Thanks for your Patience!

You can consider using the following CSS Codes in order to make the Header Transparent on Mobile Devices:
[ch_pre type="css"]#header:not(.sticky-header),
#header:not(.sticky-header) #header-wrap {
background-color: transparent !important;
}

#header + .include-header {
margin-top: -71px;
}[/ch_pre]

Additionally, we have noticed some incorrectly customized features which will cause unnecessary issues. The Header can be sticky on mobile devices and to activate this you can simply add the data-mobile-sticky="true" Attribute to the #header Tag (So remove the .sticky-header Class from ``).

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard