I am currently utilizing the Cycle2 slideshow plugin (http://jquery.malsup.com/cycle2/) to showcase images on my website. However, I've encountered an issue where the CSS from Cycle2 interferes with the controls of YouTube videos when displayed together with images.
Below is the code snippet I am using to display both images and video:
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
data-cycle-pause-on-hover="true"
data-cycle-slides=">a,>img"
data-cycle-youtube=true
data-cycle-youtube-autostart=true
data-cycle-youtube-autostop=true >
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
<a href="http://www.youtube.com/v/zugLQF3uLmk?version=3&hl=en_US&rel=0">Video</a>
</div>
I have integrated snippets of code from various demos for this setup. Additionally, here is the accompanying CSS:
.cycle-slideshow { max-width: 640px; margin: 10px auto }
.cycle-slideshow > div { width: 100%; height: 100% }
.cycle-slideshow > img { width: 100%; height: 100% }
iframe,object,embed { width: 100%; height: 100% }
/* additional CSS styles... */
The intention was to autoplay the video when it reaches the front of the slideshow, prevent slide change while cursor is hovering over the video, and include a pager for manual navigation through images/videos.
However, I have encountered a problem where I am unable to access the controls (pause, play, mute) of the video as they disappear immediately upon playback.
Thank you.