안녕하세요! 디자인전문업체 슬리피엠 [3PM] 입니다! 오늘은 홈페이지 웹사이트의 유튜브(youtube) 영상을 추가하는 방법에 대해 자세히 소개하고자 합니다. 또한, 반응형 홈페이지에서도 디바이스별로 동영상 비율은 유지하면서 크기를 반응형으로 조절하여 부드럽게 나가는 방법을 알려드리겠습니다! 유튜브(youtube) 동영상을 추가하는 방법, 삽입하는 방법 안녕! 디자인 전문업체 슬리피엠[3PM] 입니다! 오늘은 홈페이지 웹사이트의 유튜브(youtube) 영상을 추가하는 방법에 대해 자세히 소개하고자 합니다. 또한, 반응형 홈페이지에서도 디바이스별로 동영상 비율은 유지하면서 크기를 반응형으로 조절하여 부드럽게 나가는 방법을 알려드리겠습니다! 유튜브(youtube) 동영상을 추가하는 방법, 삽입하는 방법
출처 : Flaticon 출처 : Flaticon
1. 유튜브 사이트에 접속하여 원하는 영상을 선택하세요 그리고 [공유] 버튼을 눌러주세요 1. 유튜브 사이트에 접속하여 원하는 영상을 선택하세요 그리고 [공유] 버튼을 눌러주세요
출처:SMTOWN YouTube 출처:SMTOWN YouTube
인기글
2. [Open] Click the button 2. [Open] Click the button
2. Please copy the IFRAME address in [Video Sharing] 2. Please copy the IFRAME address in [Video Sharing]
3. If you paste the copied tag in a safe place on the html document, the YouTube video will be inserted! [Youtube video option] – Please create options with address parameters (parameters) – If you want to add additional parameters, use &. There are a few simple and useful features that YouTube supports 3. If you paste the copied tag in a safe place on the html document, the YouTube video will be inserted! [Youtube video option] – Please create options with address parameters (parameters) – If you want to add additional parameters, use &. There are a few simple and useful features that YouTube supports
<iframewidth=”560″ height=”315″ src=”Video address?>? Parameter = value “></iframe> <iframewidth=”560″ height=”315″ src=”Video address?>? Parameter = value”></iframe>
These are the parameters that we mainly use These are the parameters that we mainly use
Parameter value function auto1 AutoPlay function mute1 sound erasure controls0 player controller Hide loop1 Repeated playback function Playlist video ID or playlist ID video followed Playlist video in-line with playsnline1Ios Parameter value function auto1 AutoPlay function mute1 sound erasure controls0 player controller Hide loop1 Repeated playback function Playlist video ID or playlist ID video followed Playlist video in-line with playsnline1Ios
[HTML] [HTML]
<div class=’player’><iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/xjBY3MLdvVQ?si=GCvI0Z7vpRT–tv0&start=21 ” title=”YouTube video player” frameborder=”0″ allow=”acceler meter; 自動再生; クリップボード書き込み; 暗号化メディア; ジャイロスコープ; ピクチャインピクチャ; Web 共有” allow fullscreen></iframe></div> <div class=’player’><iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/xjBY3MLdvVQ?si=GCvI0Z7vpRT–tv0&start=21 ” title=”YouTube video player” frameborder=”0″ allow=”acceler meter; 自動再生; クリップボード書き込み; 暗号化メディア; ジャイロスコープ; ピクチャインピクチャ; Web 共有” allow fullscreen></iframe></div>
<div class=”player”><iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/xjBY3MLdvVQ?si=GCvI0Z7vpRT–tv0&start=21 ” title= “YouTube ビデオプレーヤー ” frameborder=”0″ allow=”acceler meter; autoplay; clipboard-write; 暗号化メディア; gyroscope; picture-in-picture; web-share” allow fullscreen> </iframe> </div> <div> 태그로 감싼 후 css 를 이용해서 반응형으로 만드는 방법을 소개해드리겠습니다 [CSS] <div class=”player”><iframe width=”560″ height=”315″ src=”https://www.youtube-nocookie.com/embed/xjBY3MLdvVQ?si=GCvI0Z7vpRT–tv0&start=21 ” title= “YouTube ビデオプレーヤー ” frameborder=”0″ allow=”acceler meter; autoplay; clipboard-write; 暗号化メディア; gyroscope; picture-in-picture; web-share” allow fullscreen> </iframe> </div> <div> 태그로 감싼 후 css 를 이용해서 반응형으로 만드는 방법을 소개해드리겠습니다 [CSS]
.플레이어 {adding-탑:56.25%; 포지션:relative;}플레이어 이프라임 {포지션:절대;탑:0;좌측:0;폭:100%;높이:100%;}です .플레이어 이프라임 {포지션:절대;탑:0;좌측:0;폭:100%;높이:100%;}です
.player {패딩탑:56.25%;위치:상대;} player iframe {위치:절대;상:0;왼쪽:0;폭:100%;} .player {패딩탑:56.25%;위치:상대;} player iframe {위치:절대 ;} {왼쪽:0 ;폭:100% ;높이:100% ;}
출처 SMTOWN의 YouTube입니다 출처 SMTOWN의 YouTube입니다
이렇게 css를 설정하면 화면이 작아지거나 커져도 동영상 비율이 그대로 유지되고 크기는 반응형으로 조절되는 동영상이 완성됩니다! 오늘은 홈페이지, 웹사이트에 유튜브 동영상을 추가, 삽입하는 방법에 대해 알아봤습니다! 다음에도 디자인, 코딩 정보 등 유익한 정보로 찾아뵙겠습니다! 오늘도 기분 좋은 하루 되세요! 이렇게 css를 설정하면 화면이 작아지거나 커져도 동영상 비율이 그대로 유지되고 크기는 반응형으로 조절되는 동영상이 완성됩니다! 오늘은 홈페이지, 웹사이트에 유튜브 동영상을 추가, 삽입하는 방법에 대해 알아봤습니다! 다음에도 디자인, 코딩 정보 등 유익한 정보로 찾아뵙겠습니다! 오늘도 기분 좋은 하루 되세요!