All geek questions in one place

CSS Convert Converts Youtube Pop-Up Video

When I use an iframe iframe in or out of a div using transform: translate () , it does not allow me to play a video in Firefox. Works in all other browsers even IE8. Here is the fiddle that I created http://jsfiddle.net/kE6vp/ If you comment out the transform property, it works fine, but the YouTube buttons cannot be connected with it, Once again only in Firefox. Has anyone experienced this before? I use the jQuery isotope plugin that posts content using the transform property. Thanks for any help.

<div class="pong"> <div class="ping"> <iframe width="326" height="237" frameborder="0" allowfullscreen="1" src="https://www.youtube.com/embed/lEhu2cFvDe8?wmode=opaque?rel=0?autoplay=1&amp;"></iframe></div> </div> .pong{ height: 237px; transform: translate(20px, 100px); width: 326px; } .ping{ height: 237px; position: absolute; width: 326px; z-index: 40000; }
+3
source share
1 answer

This seems to be a problem with Flash on Firefox, if you force the YouTube player HTML5, the problem is fixed.

http://jsfiddle.net/8EMzc/

Do this by adding the URL &html5=1 to YouTube. I believe that if HTML5 is not supported, it will revert to Flash, but I'm not sure about that. You can also hack the browser and use the HTML5 player only for Firefox (not recommended, but you are working with an error, so there is no easy way to solve this problem).

Alternatively, you can turn off CSS transforms in Isotope with the transformsEnabled option

 $('#container').isotope({ transformsEnabled : false });
+5
source

Source: https://habr.com/ru/post/1402909/

More articles:


All Articles