유튜브 풀화면 묵음배경 예제

비타주리

· 2년 전 · 조회 1615 1615 · 댓글 9 9

https://blog.kakaocdn.net/dn/6eYgX/btr0fJLgPoX/EHkvCpbsRK98G9lxcHZLN0/tfile.html

모바일에서 가로 세로로 이리 저리 돌려 보세요.

[code]

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10">
<meta http-equiv="imagetoolbar" content="no">
<title>wittazzurri youtube</title>
<style>
body { margin:0px; }
#mainDiv { position:absolute; padding:20px; box-sizing:border:box; }
#ytDiv { width:100%; height:100vh; position:fixed; display:flex; align-items:center; overflow:hidden; margin:0 auto; }
#ytPercent { width:100%; position:relative; overflow:hidden; display:flex; justify-content:center; }
#ytPlayer { display:block; position:absolute; height:400%; top:-150%;}
#ytPercent div { display:block; position:absolute; top:0%; width:100%; height:100%; }
</style>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
ytID = "TSBGN9VaiMA";
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player("ytPlayer", {
events: {
"onReady": (yt) => {
yt.target.loadVideoById(ytID);
yt.target.mute();
},
"onStateChange": (yt) => { if (yt.data === 0) yt.target.loadVideoById(ytID); }
}
});
}
function ytFullSize() {
   if (ytDiv.offsetHeight / ytDiv.offsetWidth <= 9 / 16) {
       ytPlayer.style.width = "100%";
       ytPercent.style.paddingTop = "56.25%";
   }
   else {
       ytPlayer.style.width = ytDiv.offsetHeight * 16 / 9 + "px";
       ytPercent.style.paddingTop = 56.25 * ytPercent.offsetWidth * ytDiv.offsetWidth / 100 + "%";
   }
}
document.addEventListener("DOMContentLoaded", ytFullSize);
addEventListener("resize", ytFullSize);
</script>
</head>

여기에 내용물을 넣으세요.

</div>

</body>
</html>

[/code]

https://sir.kr/qa/489861

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 9개

들레아빠

번호	분류	제목	글쓴이	날짜	조회
5276		자바스크립 시계 [한국시간 고정] [8]	오땡스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1336
5275		라라곤 6.0 데이타베이스 패스워드 설정하기 [1]	마젠토 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1405
5274	기타	특정 기기 접근 금지시키는 스크립트	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	824
5273	JavaScript	ThreeJS - 3D Bar and Progress Bar [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1056
5272	node.js	RAM점유크기에 의한 노드서버관리	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	750
5271	JavaScript	Javascript Undo, Redo 기능 구현하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1503
5270	PHP	PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	850
5269	node.js	nodejs서버가 사용중인 메모리에 대한 로그	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	686
5268	node.js	node.js에서 스케쥴링작성 [8]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1217
5267	PHP	파일의 MIME 타입을 얻기 위한 클래스 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1599
5266	MySQL	InnoDB와 MyISAM의 우단점	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1095
5265	PHP	코드이그나이터와 라라벨의 비교 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2035
5264	JavaScript	자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	862
5263	기타	일반 tcp소켓과 웹소켓의 비교 [5]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2985
5262	기타	다중 소켓 포트와 한 개의 소켓 포트 비교	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	671
5261	node.js	tcp소켓과 websocket 의 비교 [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1065
5260	JavaScript	JavaScript로 이미지의 부분 영역을 따내기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1514
5259	node.js	JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	736
5258	node.js	Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1750
5257	node.js	노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1302
5256	PHP	PHP를 사용하여 TCP 소켓 서버를 만드는 방법	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1941
5255	node.js	nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	692
5254	PHP	PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	3017
5253	node.js	Node.js로 지속적인 핑 결과를 파일로 저장	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	681
5252	정규표현식	특수문자 제거, 우리글짜가 있는지 체크	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	625
5251	node.js	Node.js에서 PDF 파일의 페이지 수를 얻기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	883
5250	PHP	PHP로 pdf의 페이지수를 얻기 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1117
5249	node.js	Node.js로 워터마킹 기능을 구현하는 방법	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1066
5248	PHP	PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1413
5247	node.js	NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1021

유튜브 풀화면 묵음배경 예제

댓글 작성

댓글 9개

게시판 목록

개발자팁

자바스크립 시계 [한국시간 고정] [8]

라라곤 6.0 데이타베이스 패스워드 설정하기 [1]

[기타] 특정 기기 접근 금지시키는 스크립트

[JavaScript] ThreeJS - 3D Bar and Progress Bar [1]

[node.js] RAM점유크기에 의한 노드서버관리

[JavaScript] Javascript Undo, Redo 기능 구현하기

[PHP] PHP에서 다운로드로직을 구현할때 서버부하문제를 고려한 방법

[node.js] nodejs서버가 사용중인 메모리에 대한 로그

[node.js] node.js에서 스케쥴링작성 [8]

[PHP] 파일의 MIME 타입을 얻기 위한 클래스 [1]

[MySQL] InnoDB와 MyISAM의 우단점

[PHP] 코드이그나이터와 라라벨의 비교 [1]

[JavaScript] 자바스크립트 기반으로 HTML Canvas에 이미지를 불러들여 테두리색입히기

[기타] 일반 tcp소켓과 웹소켓의 비교 [5]

[기타] 다중 소켓 포트와 한 개의 소켓 포트 비교

[node.js] tcp소켓과 websocket 의 비교 [2]

[JavaScript] JavaScript로 이미지의 부분 영역을 따내기

[node.js] JWT란 무엇이며 nodejs에서 JWT를 구현하기 위한 방법

[node.js] Node.js 코드를 실행 가능한 단일 실행 파일로 묶는 방법

[node.js] 노드에서 이미지 자료를 웹소켓을 통해 클라이언트에 전송하고, 클라이언트에서는 웹소켓을 통해 이미지를 받아서 웹브라우저에 표시 [1]

[PHP] PHP를 사용하여 TCP 소켓 서버를 만드는 방법

[node.js] nodejs로 망기판을 선택하여 그 망기판으로 외부와 통신하는 코드 [1]

[PHP] PHP로 웹소켓서버를 생성하여 채팅기능 구현하기 [2]

[node.js] Node.js로 지속적인 핑 결과를 파일로 저장

[정규표현식] 특수문자 제거, 우리글짜가 있는지 체크

[node.js] Node.js에서 PDF 파일의 페이지 수를 얻기

[PHP] PHP로 pdf의 페이지수를 얻기 [1]

[node.js] Node.js로 워터마킹 기능을 구현하는 방법

[PHP] PHP를 사용하여 이미지에 워터마크를 추가하는 방법 한가지

[node.js] NodeJS에서 image를 업로드 하면 그와 유사한 상품리스트 작성하기 [2]