CSS는 YouTube 동영상

를 내장 브레이크와 번역 변환. 다른 모든 브라우저에서도 작동합니다 (IE8). 여기 내가 만든 피들입니다 http://jsfiddle.net/kE6vp/ 변환 속성을 주석 처리하면 잘 작동하지만 YouTube 버튼에는 액세 스할 수 없습니다. Firefox에서만 다시 나타납니다. 누구든지 전에 이것을 경험합니까? 변환 속성을 사용하여 내용을 배치하는 jquery isotope 플러그인을 사용하고 있습니다. 어떤 도움을 주셔서 감사합니다.CSS는 YouTube 동영상

<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; 
}

출처

2013-07-19 ski760

Firefox의 Flash에서는 문제가있는 것처럼 보입니다. YouTube의 HTML5 플레이어를 강요하면 문제가 해결됩니다.

http://jsfiddle.net/8EMzc/

당신은 YouTube의 임베드 URL에 &html5=1를 추가하여이 작업을 수행. 나는 HTML5가 지원되지 않는다면 플래시로 돌아갈 것이라고 생각하지만, 이것에 대해서는 잘 모르겠다. 또한 브라우저 스 니프 (sniff)를 사용하여 HTML5 플레이어를 Firefox에만 제공 할 수 있습니다 (권장하지는 않지만 버그를 해결하고 있으므로이를 해결할 수있는 직접적인 방법은 없습니다).

또는, CSS는 transformsEnabled option

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

출처

2013-07-19 14:37:45 Duopixel

감사 Duopixel와 동위 원소로 변환하지 않도록 설정할 수 있습니다. 불행히도 내가 바라는 대답이 아닙니다. :-(jquery.isotope를 사용하여 프로젝트를 만들고 프로젝트 레이아웃을 위해 transform : translate()를 사용합니다.이 플러그인을 사용하지 않는 다른 플러그인에 대한 제안이 있을지도 모릅니다. 접근법에 대해 다시 한번 감사드립니다 – ski760

왜이 솔루션이 좋은 옵션이 아닌지 모르겠지만 (HTML5 플레이어를 사용하면됩니다.) 그러나 Isotope가 CSS 변환을 ' – Duopixel

Duopixel! 대단히 감사합니다. – ski760

CSS는 YouTube 동영상

답변

관련 문제