자바스크립트 유튜브 배열예시

 

url 로 변수를 만들어 배열을 나열해준다. 

 

$(document).ready(function () {
  // 동일 데이터타입을 저장할 경우 배열
  var url = ['https://youtu.be/KSQJTSsUoDM', 'https://www.youtube.com/embed/rCim2a9h69M', 'https://www.youtube.com/embed/dIuArPmla2M'];
  console.log(url[0]);
});

 

 

 

 

유튜브 링크를 배열로 링크 나열을 해준 후 콘솔로 찍어보면 나오는것 확인

 

 

---

제이쿼리로 누르면 영상 나오게 하기 

 

$(document).ready(function () {
  // 동일 데이터타입을 저장할 경우 배열
  var url = ['https://youtu.be/KSQJTSsUoDM', 'https://www.youtube.com/embed/rCim2a9h69M', 'https://www.youtube.com/embed/dIuArPmla2M'];
  console.log(url[0]);

  // flex 구조일경우 css 에서 display:none 을 사용하면 보여질때 display:block으로 바뀜
  $('.modal_youtube').hide();

  
  $('.main_youtube .thumb li').on('click', function (e) {
    e.preventDefault();
    $('.modal_youtube').show();
  });

  $('.modal_youtube .btn_close').on('click', function () {
    $('.modal_youtube').hide();
  });
});

 

 

---

 

 

끄려면?

 

유튜브의 src를 삭제해버림 

 

---

단 src가 빈칸이면 벨류에 걸리므로 about blank 즉 빈칸을 넣어준다

 

 src="about:blank"

 

---

이제 각 버튼을 클릭하면 해당 동영상이 나오게 해보자 

 

 

인덱스 index 함수로 찍어보면 0,1,2 가 생성됨을 알수 있다.

 

    var idx = $(this).index();

 

 

콜백함수 안에 지역변수 만들어주기 

배열인덱스를 .index() 변수로 만들어준다.

 

---

 

 

 

그다음 속성을 src 속성을 가져올수 있도록 .attr 함수를 적용한다. 

attr 적용시 나오는 코드 힌트 

 

 

 

  $('.main_youtube .thumb li').on('click', function (e) {

    e.preventDefault();

    var idx = $(this).index();

    $('.modal_youtube iframe').attr('src', url[idx]);

 

 

 

 

- 앞서 만든 idx 배열을 url 변수에 넣어 자동으로 idx 배열을 찾을수 있도록한다. 

 

 

 

    $('.modal_youtube').show(); 

 

그리고 동영상을 보여라 

 

  $('.main_youtube .thumb li').on('click', function (e) {
    e.preventDefault();
    var idx = $(this).index();
    $('.modal_youtube iframe').attr('src', url[idx]);
    $('.modal_youtube').show();
  });

 

 

---

닫기

 

  $('.modal_youtube .btn_close').on('click', function () {

    $('.modal_youtube iframe').attr('src', 'about:blank');

    $('.modal_youtube').hide();

  });

 

 

동영상의 재생을 끄기 위해서 

다시 src 의 값을 about:blank로 바꿔준다. 

그리고 동영상을 숨켜라

 

---

결과 

 

 

 

그럼 유튜브썸네일 글자 클릭시 각 배열에 해당하는 동영상이 나오고 

닫기를 누르면 닫힘 확인 

 

$(function () {
  // 동일 데이터타입을 저장할 경우 배열
  var url = ['https://www.youtube.com/embed/nNNT5J2t0Iw', 'https://www.youtube.com/embed/rCim2a9h69M', 'https://www.youtube.com/embed/dIuArPmla2M'];
  console.log(url[0]);

  // flex 구조일경우 css 에서 display:none 을 사용하면 보여질때 display:block으로 바뀜
  $('.modal_youtube').hide();

  $('.main_youtube .thumb li').on('click', function (e) {
    e.preventDefault();
    var idx = $(this).index();
    $('.modal_youtube iframe').attr('src', url[idx]);
    $('.modal_youtube').show();
  });

  $('.modal_youtube .btn_close').on('click', function () {
    $('.modal_youtube iframe').attr('src', 'about:blank');
    $('.modal_youtube').hide();
  });

 

함수로 한번더 감아주기

 

$(function () {
  function toggleYoutubeModal() {
    // 동일 데이터타입을 저장할 경우 배열
    var url = ['https://www.youtube.com/embed/nNNT5J2t0Iw', 'https://www.youtube.com/embed/rCim2a9h69M', 'https://www.youtube.com/embed/dIuArPmla2M'];
    console.log(url[0]);

    // flex 구조일경우 css 에서 display:none 을 사용하면 보여질때 display:block으로 바뀜
    $('.modal_youtube').hide();

    $('.main_youtube .thumb li').on('click', function (e) {
      e.preventDefault();
      var idx = $(this).index();
      // index 배열값을 변수로 감아 적용
      $('.modal_youtube iframe').attr('src', url[idx]);
      $('.modal_youtube').show();
    });

    $('.modal_youtube .btn_close').on('click', function () {
      $('.modal_youtube iframe').attr('src', 'about:blank');
      $('.modal_youtube').hide();
    });
  }
  toggleYoutubeModal();
});

 

함수를 선언하고 마지막에 함수를 실행해준다. 

 

 

 

 function toggleYoutubeModal() {

  }

  toggleYoutubeModal();

 

 

 

 

 

후 ... 배열을 적용할 줄을 몰라 해멨네