magnific popup + 유튜브 자동재생 javascript 알아보기
홈페이지가 열리면 바로 유튜브 자동재생이 되게 하기 서버를 제작하기에 메인 홈페이지에 접속시 무조건 유튜브 자동재생이 되도록 스크립트를 짰다. 아래와 같이 세팅하면 된다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>TITLE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> <script type ="text/javascript"> var num = 3; //재생할 목록 갯수 설정, array랑 개수 일치 하면됨 //YouTube Settings youtubelink = new Array ("주소1", "주소2", "주소3"); //스크립트 재생할 목록 (뒷주소만) x = (Math.floor(Math.random() * num)); randomyoutubelink = (youtubelink[x]); $(document).ready(function() { $(window).load(function () { $.magnificPopup.open({ items: { src: 'https://www.youtube.com/watch?v='+randomyoutubelink+'?autoplay=1&rel=0', }, type: 'iframe' }, 0); }); }); </script> |
우리가 수정할 곳은 주소1, […]