본문 바로가기

CSS🔧/css 동영상(유튜브)3

html, css - 유튜브 동영상 2 /모달팝업창 적용 자 여기 메인화면에 유튜브 버튼을 클릭하면 유튜브가 보이게 하기 위해서 영상을 먼저 넣어보았다. 16:9의 비율에 맞춰, 가로 850 사이즈로 영상을 맞추고 싶을때 세로(높이) 크기를 구해보자. 가로가 850사이즈일때 16:9 비율 구하기 ( 원하는 너비 크기 × 9 ) ÷ 16 ＝ 높이값 (( 850 x 9 ) = 7650 ) ÷ 16 = 478.125 즉 가로(넓이) 850px 세로(높이) 478px 이렇게 높이를 구하고 영상을 넣어봤을때 화면을 옮기거나 축소를하면 ? 자동리사이징 안됨 정가운데가 아닌 이상한데 붙거나 화면이 이동해버린다.. 즉 모바일이나 여러 다른 환경의 브라우저에 노출될 경우 화면 박살★ 가변요소로 높이값을 지정하지않고 퍼센트로 항상 정중앙에 위치하도록 해보잣! 1. 유튜브가 들어.. 2022. 9. 21.

html, css - 유튜브 동영상 넣기 여기 재생버튼을 누를시 유튜브 동영상이 팝업으로 뜰수 있도록 적용해보자 1. 유튜브에서 태그 가져오기 framenorder 속성은 비표준이므로 제거 단 이럴경우 자동재생이나 무한 재생이 적용되지않는다. 2. 자동재생 autoplay 유튜브 옵션은 url뒤에 파라메터(매개변수)를 붙인다. url?파라메터=값&파라메터=값 형식 3. 음소거 적용 mute 참고링크 https://stackoverflow.com/questions/35044594/youtube-how-to-present-embed-video-with-sound-muted 2022. 9. 21.

html css video (풀페이지 비디오 삽입) 확장자 포멧 mp4 포멧 사용 (모든브라우저 대응) 태그 html source : mp4가 모든브라우저 지원하므로 불필요 - 여러 포맷 연결할경우 속성명 - autoplay="autoplay" 이나 속성과 값이 같을경우 속성명만 사용가능 (생략가능) 자동재생 : muted(음소거) 필수 자동루프 (무한재생) : loop 용량 20M 이하 권장 - 용량 클경우 트래픽 문제 발생할수있음 지원 - 아이폰 저전력모드일경우 자동재생불가 - 구글,ios video 정책문서 참고 - ie9이상 가능 - ios playsinline속성사용해야 자동재생됨 문구사용 Your browser does not support the video tag 삽입 -익스에선 동영상 지원이 안되므로 위 문구가 보일 수 있게 Your bro.. 2022. 9. 15.

이전 1 다음

티스토리툴바