|
아래 코드는 컴퓨터에서만 자동플레이 되는 코드 입니다. 스마트폰에서는 자동 플레이를 지원 하지 않습니다. <p><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="300" src="https://www.youtube.com/embed/llYG9PWOSnU?amp;autoplay=1&mute=0&loop=1;playlist=llYG9PWOSnU" width="600"></iframe></p> 동영상 넣기 소스 <center><video width="940" height="430" src="./mp4/파일이름.mp4" controls="controls" autoplay="autoplay"> </video></center><p></p> 동영상 / 유튜브 / 반응형 화면크기 <style> /* 동영상을 감싸는 박스 설정 */ .video-container { position: relative; width: 100%; /* 게시판 넓이에 무조건 맞춤 (작은 영상도 확장) */ max-width: 100%; /* 너무 커지지 않게 최대폭 제한 (숫자 수정 가능) */ min-width: 100px; /* 너무 작아지지 않게 최소폭 제한 */ margin: 0 auto; /* 중앙 정렬 */ padding-bottom: 56.25%; /* 16:9 비율 설정*/ height: 0; overflow: hidden; background: #000; /* 영상 로딩 전 검은색 배경 */ } /* 내부 영상(iframe, video)을 박스에 꽉 채우기 */ .video-container iframe, .video-container video, .video-container embed { position: absolute; top: 0; left: 0; width: 100% !important; /* 가로 꽉 채움 */ height: 100% !important; /* 세로 꽉 채움 */ border: 0; } </style> <!-- 실제 게시물에 들어갈 HTML 구조 --> <div class="video-container"> <iframe src="URL"></iframe> </div> 음악 넣기 소스 <div class="bgm-panel" style="text-align: center; margin: 20px 0;"> <!-- autoplay와 muted를 명시해야 자동 재생이 시작됩니다 --> <audio id="myBgm" controls loop autoplay muted preload="auto" style="width: 300px;"> <source src="/music/bgm.mp3" type="audio/mpeg"> </audio> </div> <script> (function() { var bgm = document.getElementById('myBgm'); bgm.volume = 0.5; // 사용자가 페이지 아무데나 클릭하면 음소거를 해제하고 소리를 키웁니다 var unlock = function() { bgm.muted = false; bgm.play(); // 혹시 멈춰있다면 재생 document.removeEventListener('click', unlock); }; document.addEventListener('click', unlock); })(); </script> 음악소스 넣기 2번째... <div class="bgm-panel" style="text-align: center; margin: 20px 0;"> <!-- controls 속성이 패널을 나타나게 합니다 --> <audio id="myBgm" controls="" loop="" preload="auto" style="width: 300px;"> <source src="https://w3.kwin.net/app/향수-이동원.mp3" type="audio/mpeg"> 브라우저가 오디오 태그를 지원하지 않습니다. </audio> </div> <script> // 페이지 로드 시 자동 재생 시도 (정책상 음소거로 시작 권장) window.addEventListener('load', function() { var bgm = document.getElementById('myBgm'); bgm.volume = 0.5; // 기본 볼륨 50% // 브라우저 정책 대응: 사용자가 페이지를 클릭하면 재생 시작 document.addEventListener('click', function() { if (bgm.paused) bgm.play(); }, { once: true }); }); </script> 음악파일 코드 3번째 반응형 크기로 만들때 <center> <div style="max-width: 400px; margin: 0 auto;"> <audio style="width: 100%;" src="./mp3/파일이름.mp3" controls autoplay> Your browser does not support the audio tag. </audio> </div></center> 
|
