Smaller Size Youtube Video not working inside Swiper
jquery, swiper.js, youtube, youtube-api
Solution
idangerous Swiper using CSS3 transform prevents the controls of the youtube video from being displayed and also prevent the full-screen option of it.
Setting the `backface-visibility` property on `.swiper-container` will prevent the full-screen transform3d CSS on `.swiper-wrapper` class prevent the controls of the youtube and make many other issues like the black screen, Audio playing without video etc...
so I think you should put in your consideration to change the idangerous Swiper if you want the youtube video to play properly.
Problem
i am currently working in a website in which the player size of Youtube Video is less than 150x150 which is inside a iDangero.us Swiper which is jquery swiper plugin... I have tried with applying custom size as follows:- But its creating problem with the player in Firefox it shows black box and shows a error is the console:- My demo:- Error:- ``` NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 1 [nsIDOMEventTarget.removeEventListener] ``` I have tested also on Chrome it show fine in 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 will the the solution for this? Have i mistaken somewhere...