YouTube full screen background not working in YTplayer
I am using the YTplayer plugin for YouTube full screen player into this website Breathe the tab!
- I have provided the code with helpful links! I think the code is correct!
- The player works if we click on the play control at the bottom of the video player! (picture below)!
- Please help me figure out why autoplay is not working?
- where is my code having error?
Useful links →
https://github.com/pupunzi/jquery.mb.YTPlayer
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-YTPlayer/
http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html
Here is the code ->
<a class="player" id="player" data-property="{
videoURL: 'https://www.youtube.com/watch?v=j9fgbuH0_RI&feature=youtu.be',
containment:'#videobg',
autoPlay: true,
optimizeDisplay: true,
showControls: true,
startAt: 0,
opacity: 1,
ratio: '4/3',
addRaster: false }"></a>
<div id="videobg" class="section-divider white-text videobg" data-scroll-index="4">
<div class="pattern-overlay"></div>
<div class="triangle-right"></div>
<div class="container extra-padding">
<div class="col-md-5 extra-padding">
<h1>INNOVATING THROUGH TRAVEL</h1>
<p>Travel is more than the seeing of sights; it is a change that goes on, deep and permanent, in the ideas of living.</p>
</div>
</div>
</div>
Decision
- Use the latest java script for ytplayer.
+3
source to share
1 answer
EDIT
It looks like the problem is with the jquery.mb.YTPlayer repo . If we address the issue https://github.com/pupunzi/jquery.mb.YTPlayer/issues/49
Make sure you have the latest version of the repo.
After reading the document from the repo, try replacing: autoPlay: true,
withautoPlay: true,
Final code:
<a class="player" id="player" data-property="{
videoURL: 'https://www.youtube.com/watch?v=j9fgbuH0_RI&feature=youtu.be',
containment:'#videobg',
autoplay: true,
optimizeDisplay: true,
showControls: true,
startAt: 0,
opacity: 1,
ratio: '4/3',
addRaster: false }"></a>
<div id="videobg" class="section-divider white-text videobg" data-scroll-index="4">
<div class="pattern-overlay"></div>
<div class="triangle-right"></div>
<div class="container extra-padding">
<div class="col-md-5 extra-padding">
<h1>INNOVATING THROUGH TRAVEL</h1>
<p>Travel is more than the seeing of sights; it is a change that goes on, deep and permanent, in the ideas of living.</p>
</div>
</div>
</div>
+2
source to share