HOME
홈페이지제작
쇼핑몰제작
어플리케이션
기능별홈페이지
포트폴리오
ERP 솔루션
유지보수
온라인마케팅
커뮤니티

유튜브 전체화면 또는 div 재생시 사용하세요 > 자료실

본문 바로가기

홈페이지

어플리케이션

프로그램

오늘 방문자

제작상담

■ 어떠한 것이든 설명이 가능하시면 제작이 가능합니다.
■ 각종 다양한 어플리케이션 제작경험이 많습니다.
■ 다양한 유형별 홈페이지,쇼핑몰 제작경험이 많습니다.
■ 업종별 주문형 프로그램 제작 가능합니다.
VR,AR 이용한 결과물 및 모듈제작 가능합니다.
■ 상시채용 : php,java,ios,android,ar,vr,c#,Node

 

자료실

웹 | 유튜브 전체화면 또는 div 재생시 사용하세요

페이지 정보

작성자 이창민 작성일20-10-23 17:50 조회224회 댓글0건

본문

<style type="text/css"> .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper .unclick { display: block; width: 100%; background: rgba(0,0,0,0.0); position: absolute; z-index: 11; top: 0; bottom: 0; } .videoWrapper iframe { position: absolute; top: -20%; left: 0; width: 100%; height: 140%; } </style>​

 

<div class="videoWrapper" id="section0">

<div class="unclick"></div>

<div id="player"></div>

    </div>

 

<script>

  // 2. This code loads the IFrame Player API code asynchronously.

  var tag = document.createElement('script');

 

  tag.src = "https://www.youtube.com/iframe_api";

  var firstScriptTag = document.getElementsByTagName('script')[0];

  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 

  // 3. This function creates an <iframe> (and YouTube player)

  //    after the API code downloads.

  var player;

  function onYouTubeIframeAPIReady() {

player = new YT.Player('player', {

  width: '100%',

  videoId: 'ksUk3bDGdus',

  playerVars: {

autoplay: 1,

playsinline: 1,

loop: 1,

mute: 1,

showinfo: 0,

modestbranding: 0,

rel: 0,

playlist: 'ksUk3bDGdus',

wmode: 'transparent'

  },

  events: {

'onReady': onPlayerReady

  }

});

  }

 

  // 4. The API will call this function when the video player is ready.

  function onPlayerReady(event) {

event.target.mute();

event.target.playVideo();

  }

</script> 

 

 

전체소스입니다.

 

video_id 만 변경해서 사용하면 됩니다.  unclick 적용해주셔야 클릭도 안됩니다.

 

* 비메오 유료로 하시면 간단하게 정리됩니다. 한줄로...

 


| 디몬스터 | TEL : 070-7621-0572 / 070-5022-0572 | HP : 010-7574-0572 | E-mail : jackee@naver.com
| 서울시 강남구 봉은사로24길46 | 부천시 길주로 272 2001호 | 부산시 금정구 금정로 225 5층 | 몽골사무실- Ulaannaatar.mongola bayangol district 3-khoroo agro center 9-02
당사의 어플방식은 저작권 및 특허출원중입니다. 복제,모방,변용 및 유사 상행위 적발시,경고,통보없이 민형사상 책임을 진행합니다
Copyright © www.dmonster.co.kr All rights reserved.Since 2008 (주)세미콜론즈 · 사업자번호: 801-88-00338