반응형
유튭 영상 우클릭 > 소스코드 복사하여 iframe을 따온다.
소스에 붙여넣기 하면 됨.
PC 웹에 추가
* 자동재생을 하려면 링크 끝에 아래 텍스트 추가
?autoplay=1&mute=1
<iframe width="1000" height="562.5" src="https://youtu.be/aBcDEFGh3IJ?autoplay=1&mute=1" title="영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
모바일버전 웹에 추가
* 모바일에서 자동재생을 하려면 IFame Player API를 사용하면 됨.
참고)https://developers.google.com/youtube/iframe_api_reference
//youtube 영상을 표시할 div
<div id="player1" style="width:100%">
//youtube 스크립트 파일 url 추가
<script src="https://www.youtube.com/iframe_api"></script>
//자동재생 함수 추가
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
videoId: 'aBcDEFGh3IJ', //유튭 영상ID
playerVars: {
'autoplay': 1, //자동재생
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'controls': 1, //youtube 콘트롤 표시
'color':'white',
'loop': 1, //반복 여부
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
player.playVideo();
player.mute(); //자동재생하려면 mute해야함
}
</script>
반응형
'코딩 관련 > Javascript와 jQuery, JSON' 카테고리의 다른 글
[Javascript] label 선택하기 (0) | 2022.11.21 |
---|---|
[JavaScript] 여러개의 dom 중에서 하나 선택하기 / getElementsBy (0) | 2022.11.11 |
[JAVASCRIPT] 날짜 검색 유효성 체크 date check, date validate check (0) | 2022.10.11 |
[JAVASCRIPT] javascript radio check control (0) | 2022.10.11 |
[Javascript] HTML 페이지 소스 가져오기 (0) | 2022.06.29 |