css_멀티미디어_iframe

멀티미디어(플러그인)

• 멀티미디어
  과거에는 플러그인 프로그램들을 통해서 오디오/비디오 파일을 재생했었다.
  현재는 웹표준이 적용되면서 점점 사라지고 있다.
  ★새로 개발할때에는 사용하지 말것(iframe으로 대체)

• 플러그인 방식
  <embed src="경로" type="유형">
<object data="경로" type="유형"> </object>

  • type
    1. html => text/html
    2. pdf => application/pdf
    3. mp3 => audio/x-mpeg

iframe

• iframe : 외부 문서들을 현재 문서에 삽입할 수 있는 태그
  <iframe src="문서 주소" frameborder="0"></iframe>
  iframe은 높이를 주지 않으면 기본 150px정도를 잡고 있기 때문에 사이즈를 줘야한다.

• ★itrame으로 가져온 외부 문서는 수정을 할 수 없다.
  꼭하고 싶다면 position으로 올려서 덮어씌우는 방법밖에 없다.

• 유튜브 영상 가지고 오기
  
  공유하기누르면 위와같이 뜨는데 퍼가기를 누르면 된다.
  

• width와 height값을 수정할 때 iframe의 width, height값을 지우고 css로 수정하자.
  반응형을 생각해서 할거면 height에 vw를 쓰면 된다.
  하지만 vw은 부모대비가 아닌 뷰포트대비이기 때문에 width값을 변경하게 되면 height를 변경해야하므로 유지보수에는 좋지 않다.
  그래서 height값은 주지 않고 padding-bottom에 %를 쓰는 것이 더 좋다.
  padding-bottom은 부모 width값 대비 %를 줄 수 있으니까.

  .inner{
     width: 50%;
  }
  .box{
     width: 100%;
     padding-bottom: 56%;
     position: relative;
  }
  .iframe{
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
  }
  
  <div class="inner">
     <div class="box">
         <iframe class="iframe" src="https://www.youtube.com/embed/k0Ee79pRxe0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
  </div>

  inner에 width값을 주고 box는 부모의 width값 대비로 높이줘야하니까 padding-bottom %로 주고, iframe은 padding-bottom준 만큼 height를 잡아야하니까 position absolute를 준 것이다.

• 유튜브 속성
  get방식으로 url에 ?와 &를 이용

  1. rel : 재생종료 후에 관련영상 표시 여부
     0 : 안보여줌
     1 : 보여줌(기본값)

  2. fs : 풀스크린 여부 결정(풀스크린 사용못하게 하거나 아예 버튼이 없어짐)
     0 : 버튼 안보여줌
     1 : 버튼 보여줌(기본값)

  3. controls : 컨트롤 패널 (컨트롤 화면만 안보이는 것 뿐, 키보드 컨트롤은 가능)
     0 : 패널 안보여줌
     1 : 패널 보여줌(기본값)

  4. disablekb : 키보드 컨트롤
     0 : 컨트롤 가능(기본값)
     1 : 컨트롤 불가

  5. modestbranding : youtube로고 없앰(빼지 않는 것을 권장). ★controls 보일 때만 사용 가능
     0 : 보여줌(기본값)
     1 : 안보여줌

  6. loop : 반복재생 ★7번 playlist와 같이 써야 적용 됨
     0 : 한번만 재생(기본값)
     1 : 반복

  7. playlist : 이어서 나올 영상의 id를 나열

  8. autoplay : 자동재생. 유튜브 정책상 막힘.
     0 : 재생안함(기본값)
     1 : 자동재생

     <iframe class="if_2" src="https://www.youtube.com/embed/U7GHmma6mus?si=tnAKu7SivSdxlmHb?rel=0&fs=1&controls=1&disablekb=1&modestbranding=1&loop=1&playlist=U7GHmma6mus,eBqd1nCrfEE" ></iframe>

irame-지도

https://www.google.com/maps
(naver, kakao api를 사용해도 된다. )
1. 찾으려난 주소 검색
2. '공유' 클릭
3. 공유 패널에서 '지도 퍼가기' 선택
4. iframe 코드 복사해오기
5. 내 html에 css로 iframe 사이즈 조정하기

다만 해당 건은 길찾기나 수정은 안되고 회사 찾기같은 간단한 지도만 첨부하는 것이다.