πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ytbgnav.js is a jQuery plugin that utilizes Youtube Player API to create a fullscreen Youtube video background with custom controls and playlist for your webpage.

background Youtube video-background

Documentation

jQuery-Youtube-background-navigation

jQuery plugin that lets you create background videos using youtube api and control navigation.

YouTube IFrame API을 μ΄μš©ν•˜μ—¬ 배경에 μ˜μƒμ„ μž¬μƒν•΄μ€λ‹ˆλ‹€. λ‚΄λΉ„κ²Œμ΄μ…˜ λ°”λ₯Ό μ΄μš©ν•˜μ—¬ μ˜μƒμ„ μ œμ–΄ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κΈ°λŠ₯

  • μ˜μƒμ΄ λλ‚˜λ©΄ λ‹€μŒ μ˜μƒμœΌλ‘œ μžλ™μž¬μƒ(λ§ˆμ§€λ§‰ μ˜μƒμ΄ λλ‚˜λ©΄ 처음으둜 이동)
  • ν”Œλ ˆμ΄ μ•„μ΄μ½˜μ„ λˆ„λ₯΄λ©΄ ν˜„μž¬ μž¬μƒλ˜κ³  μžˆλŠ” 배경을 λ ˆμ΄μ–΄νŒμ—…(Modal dialog box)으둜 λ…ΈμΆœ
  • λ°°κ²½μ˜μƒ μŒμ†Œκ±° λ²„νŠΌ μΆ”κ°€

Demo

ν’€νŽ˜μ΄μ§€ 데λͺ¨ : https://iluku.net/youtube/index.html

높이지정 데λͺ¨ : https://iluku.net/youtube/index.html?h=600

μΆ”κ°€μ„€λͺ…

* 높이지정 방법

css\ytbgnav.css

body{height:/* fix here */;      font-family:tahoma, 'NanumBarunGothic', dotum, sans-serif} 

* λ°°κ²½μ˜μƒμ„ λ ˆμ΄μ–΄νŒμ—…μ— λ…ΈμΆœ 방법

js\ytbgnav.js

popID[_curClick]을 bgID[_curClick]으둜 λ³€κ²½

$(".btn_pop").live("click",function() {     player.pauseVideo();     $(".pop_yt iframe").attr("src", "https://www.youtube.com/embed/"+ bgID[_curClick] +"?rel=0&autoplay=1;&wmode=opaque");     $(".pop_yt").show();     $(".pop_overlay").show(); }); 

You May Also Like