video/iframe 태그 이슈

잘못된 정보 혹은 더 좋은 정보가 있다면 댓글로 달아주세요!✨

아이폰에서 자동재생

<video autoplay loop muted playsinline class="video-autoplay">
  <source src="video/video.mp4" type="video/mp4">
</video>

playsinline 코드를 추가해주면 된다

아이폰에서 url을 들어가자마자 페이지가 아닌 동영상 플레이어로 넘어가는 현상

이러한 현상을 방지할 수 있는 코드

<video playsinline>

video 태그 안에 playsinline 속성을 사용하면 인라인으로(플레이어로 이동 또는 전체화면 모드로 넘어가지 않고) 재생이 된다. 

덧붙여 autoplay / loop / muted 등의 속성을 함께 써주면 자동재생되면서 전체화면으로 넘어가지 않음

모바일상에서 썸네일 잡기

<video preload="metadata" src="vidlink.mp4#t=0.5"></video>

출처 : https://saml2l.tistory.com/146

<div class="video">
    <video width="100%" poster="포스터로 쓰일 이미지 경로" autoplay loop controls>
      <source src="비디오경로" type="video/mp4">
    </video>
</div>

poster="" 속성을 사용할 경우에는 preload="metadata" 는 필요없다

출처 | https://gahyun-web-diary.tistory.com/237

iframe 정지 버튼

1. src에 마지막에 ?enablejsapi=1&version=3&playerapiid=ytplayer 를 붙인다.

위의 캡쳐된 소스코드로 보자면

<iframe src="https://www.youtube.com/~~~~~~?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>

2. 제어할 버튼에 이벤트 추가

$(".stop").on("click", function(){
	$("iframe")[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});

stopVideo, playVideo, pauseVideo를 알맞게 넣으면 된다.

출처 | https://hplayground.tistory.com/88

iframe 높이 자동 조절(javascript X!! only css)

html

    <div class="videoWrap">
        <iframe frameborder="0" 
                allowfullscreen="1" 
                title="YouTube video player"
                src="https://www.youtube.com/">
        </iframe>
    </div>

CSS

    .videoWrap{
        position: relative;
        width: 100%;
        padding-bottom: 56%;
        overflow: hidden;
    }
    
    .videoWrap iframe{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 100%;
        background: #000;
    }

출처 | https://velog.io/@nammm/iframe-%EB%86%92%EC%9D%B4-%EC%9E%90%EB%8F%99-%EC%A1%B0%EC%A0%88%ED%95%98%EA%B8%B0