Smaller Size Youtube Video not working inside Swiper

Question

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...

Answer 1

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.

Answer 2

Try this:

1. ADD ?html5=1 to your embed link
2. Add useCSS3Transforms: false to the swiper attributes.

Works like a charm :)