반응 형 tumblr 비디오가 모바일에서 작동하지 않습니다.

Question

tumblr 주제에서 나는 반응 형 비디오를 만들기 위해 fitvids.js를 사용합니다.

모든 일반적인 삽입물 (YouTube, Vimeo 등)은 매력처럼 작동합니다.

나는 Tumblr 비디오 업로드 (tumblr 비디오 플레이어)를 지원하기 위해 FitVids.js를 편집했습니다. 데스크톱에서는 올바르게 작동하지만 모바일 장치에서는 작동하지 않습니다. 그림이 잘리고 재생 버튼이 너무 커서 비디오 컨테이너를 초과합니다. 비디오를 전혀 재생할 수 없습니다. 작동이 페이지에서

,하지만 난 그냥 방법을 알아낼 수 없습니다 : http://mikehacks.tumblr.com/post/86858788257

내 HTML은 다음과 같습니다

<div class="video-container"> 
    <p>{VideoEmbed-700}</p> 
</div> 

비디오 컨테이너는 일부 마진을 추가 할 수 있습니다 :

을

.video-container { 
    margin-top: 30px; 
} 

나는 이것을 question으로 읽지 만, 나는 fitvids, js에 의존하고 있으며 사용자에게 화면 비율을위한 태그를 추가 할 것을 기대할 수 없다. 또한 비 전형적인 종횡비에서는 작동하지 않습니다. 새로운 질문을 시작해서 죄송합니다. 나는 아직 논평 할 수 없다.

나는 정말 이걸 붙어있어, 어떤 도움이 많이 감사합니다!

Answer 1

나는 모바일에서 작동하도록 tumblr 비디오를 얻었습니다. 여전히 fitvids를 사용했습니다. 꽤 간단하지만 누군가는 다음과 같이 유용 할 것입니다 :

tumblr 비디오 플레이어는 모바일 장치에서 완전히 다른 마크 업을가집니다. (비디오에 대한 링크 일뿐입니다) 분명히 fitvids는 아무 것도하지 않을 것입니다.

나는 단지 터치 장치에 텀블러 비디오를 조정할이 간단한 CSS를 사용 :

.touch .video-container a { 
    width: 100% !important; 
    height: auto !important; 
} 

(I 주위 p 태그를 제거당한 {VideoEmbed-700}이되지 할 수있는 비디오를 발생하기 때문에 전혀 재생되지 않습니다.) 터치 클래스는 Modernizr이 궁금해하는 경우에 대비하여 생성됩니다.

이렇게하면 가로 세로 비율에 대한 태그를 다룰 필요가 없습니다!