Smaller Youtube video size does not work inside Swiper

Question

I am currently working on a website where the Youtube Video player size is less than 150x150, which is inside iDangero.us Swiper , which is a jQuery swiper plugin ...

I tried using custom size as follows: -

But creating a problem with the player in Firefox, it shows a black box and shows an error in the console: -

My demo: -

Error: -

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 1 [nsIDOMEventTarget.removeEventListener] 

I also tested on Chrome, it shows perfectly that ...

I am using this code: -

 <div class="swiper-container swiper-vid"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 1</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 2</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 3</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 4</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 5</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 6</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/_wmzPRwLIaM?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 7</p> </div> </div> <div class="swiper-slide"> <div class="vid-contain"> <div class="videoWrapper"> <!-- Copy & Pasted from YouTube --> <iframe width="142" height="80" src="//www.youtube.com/embed/Mn63rXCkCxY?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <p>Slide 8</p> </div> </div> </div> </div> 

Js used: -

 swiperVid = $('.swiper-vid').swiper({ slidesPerSlide : 3, calculateHeight:true }); 

What solution will be for this? I was mistaken somewhere ...

Answer 1

idangerous Swiper using CSS3 conversion prevents the display of controls for YouTube video, as well as prevents its full-screen version.

Setting the backface-visibility .swiper-container to .swiper-container prevent full-screen transform3d CSS on the .swiper-wrapper class prevents YouTube from managing and does many other problems like black screen, audio playback without video, etc.

so I think you should take into account to change the dangerous Swiper if you want the youtube video to play correctly.

Answer 2

Try the following:

• ADD ?html5=1 to your inline link
• Add useCSS3Transforms: false to swiper attributes.

It works like a charm :)

Answer 3

Have you tried entering the full url instead of the name / file in the src attribute? Give it a try and let me know if that helps.

Update:

Try changing the useCSS3Transforms parameter to false with the function that builds swiper, I also had this problem and fixed it. Somehow it makes YouTube iframe break on iOS too.

Answer 4

Disabling css3 transitions was not enough for me. I had an html5 video delivered via ooyla inside a slide swiper.

I had to disable css3 transitions and disable the loop to load my video correctly.

 $('.swiper-container').swiper({ mode:'horizontal', useCSS3Transforms: false, loop: false }); 

My videos are now playing!