JS YouTube 다른 iOS 버전에 스왑을 삽입하지 마세요

Question

그래서 동영상이있는 모바일 사이트에서 작업하고 있습니다. 여러 기기에서 플래시와 HTML5를 전환하기 위해 제공된 YouTube API를 사용하고 있지만 여러 가지 이유로 맞춤 미리보기 이미지를 사용하고 있습니다.

사용자가 그림을 클릭 할 때까지 비디오 ifClick에 대한 이미지를 교환하고 switchItUp 메서드를 호출 할 때까지 일부 iframe을 숨기려면 javascript를 사용합니다. API에 의해 지정된

 var video = document.getElementById("VideoID"); 
     var image = document.getElementById("PlaceholderImage"); 
     video.style.display = "none"; 

     function switchItUp() { 
      var video = document.getElementById("VideoID"); 
      var image = document.getElementById("PlaceholderImage"); 
      image.style.display = "none"; 
      video.style.display = "block"; 
     }

YouTube 고객 코드

은 다음과 같습니다 (혼자 때 페이지에서 작동) :

<iframe src="http://www.youtube.com/embed/BaKcl0Qg13o?autoplay=1" width="300" height="190"></iframe> 

는 여기에서 재미있는 부분입니다.

• 이것은 Safari 4.0에서 훌륭하게 작동합니다.
• 4.1에서 onClick은 비디오를 표시하지만 재생할 수는 없습니다.
• 4.2에서는 비디오가 전혀 표시되지 않지만 이미지가 숨겨지면 페이지에 거대한 공백이 남습니다.

모든 데스크탑 브라우저에서 잘 작동하므로이 문제를 디버깅하는 것이 좋습니다.

도움을 주시면 감사하겠습니다. 타이아!

---

편집 : 스왑은 1 클릭에 작동하려면 플레이어가 자동 재생에 있어야합니다, 그래서 디스플레이로 시작하지해야 페이지 없음.

또한 컨테이너에서이 문제가 발생합니까? 현재 디스플레이에없는 <span> 내부에 렌더링 중입니다. 표시 전에 블록 설정 : 없음.

Answer 1

와 '쇼'를 우리는 썸네일 스왑을 제거하기로 결정 할 수 있습니다. 모든 iOS 버전에서 작동하는 방법은 없습니다. YouTube에서 생성 한 미리보기 이미지를 사용하고 있습니다.

Answer 2

display=none을 사용하는 대신 화면 밖으로 비디오를 숨겨보십시오. 이것은 이런 종류의 문제에 대한 고전적인 해결 방법입니다.

video.style.position = 'absolute'; 
video.style.top = '-10000px'; 
video.style.left = '-10000px'; 

그런 다음 당신은 자동 재생 4.2에서 작동하지 않기 때문에의

video.style.position = 'static'