2016. 9. 30. 10:31ㆍ티끌모아
지금 쓰고 있는 반응형 스킨에 네이버 tv캐스트를 넣어보았드니 반응형이 작동을 하지 않는다
동영상 삽입을 하고나면 pc에서는 그대로 보여지지만 모바일에서는 화면이 줄지 않았다
그래서 찾아서 해결은 했다
더 좋은 방법이 있을텐데 아직 나의 수준이 이것밖에 안되서 간단하게 이걸로 반응형에 작동하는 동영상을 넣어보도록 한다
우선 동영상을 넣기 위해 tv캐스트 화면을 보자
화면에 공유버튼이 보일것이다
공유버튼을 눌러 코드를 복사해온다 최대크기의 동영상을 선택해서 복사한다
티스토리 글쓰기에서 html을 선택해서 붙여넣기 한다
<iframe src='http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid=B7C4F31B44750FEEAF8D92B3E8799DCE9E7A&outKey=V128ec27c142a84ae3a4ae876bc7a60f03c6ca5265d3490592f91e876bc7a60f03c6c&controlBarMovable=true&jsCallable=true&isAutoPlay=true&skinName=tvcast_white' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' WIDTH='1280' HEIGHT='720' allowfullscreen></iframe>
이렇게 하면 위 동영상처럼 모바일에서건 pc에서건 해상도 변화거 없어
반응형 스킨에 적용할수가 없다
그럼 간단한 삽입으로 반응형이 되도록 해보자
<iframe class="iframe-player" src='http://serviceapi.rmcnmv.naver.com/flash/outKeyPlayer.nhn?vid=B7C4F31B44750FEEAF8D92B3E8799DCE9E7A&outKey=V128ec27c142a84ae3a4ae876bc7a60f03c6ca5265d3490592f91e876bc7a60f03c6c&controlBarMovable=true&jsCallable=true&isAutoPlay=true&skinName=tvcast_white' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' WIDTH='1280' HEIGHT='720' allowfullscreen></iframe>
아이프레임소스에서 추가로 class="iframe-player" 를 넣어주면 반응형스킨에서도 작동이 된다
그럼 위 소스가 적용된 동영상을 보도록 하자
어떤가 완벽하게 작동하는걸 볼수있다
여기서 네이버tv캐스트는 기본 자동플레이가 되어있다
자동플레이가 되지 않게 하려면 소스부분에서 AutoPlay=true 여기 true만 지워주면 수동으로 변한다