[HTML 5 반응형 웹디자인_2015.03.27] 9. 반응형 웹프로젝트

[ 들어가면서...]

ㅇ 프로젝트 구조  

- [WebContent] : html 파일

- [WebContent]-[js]: 자바스크립트 파일

- [WebContent]-[css]: CSS파일

- [WebContent]-[img]: 이미지파일(png)

- [WebContent]-[video]: 동영상 파일

- [WebContent]-[audio]: 오디오 파일

 

ㅇ 반응형 비디오 삽입

    - making iframe video content work in a responsive web design : <video>, <iframe>

     - using the to FitVids(FitVids jQuery plugin)

       . 구글 콘텐츠 전송 네트워크 사용
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
. fitvids.js파일을 [js]폴더에 저장 후 <script>링크 연결
   <script src=“js/jquery.fitvids.js"></script>
. 비디오가 있는 영역에 제이쿼리 사용
   <script>
      $(document).ready(function(){
          $("#content").fitVids();
      });
   </script>

 

 

          - 비디오를 재생

<video width="320" height="240" controls>

   <source src="movie.mp4" type="video/mp4">

   </source>

</video>

                   ------>

1. <video width="320" height="240" controls>      <source src="movie.mp4" type="video/mp4">      </source>     </video>

2. css 에 width, height 추가    video{         max-width : 100%;         height : auto;    }  ... 로컬 호스트에선 잘 동작-but iFrame에 임베디드된 경우  문제

 

 

 

 

 

                   ------>

                  1. jQuery, Fitvids, js파일을 [WebContent]-[js]에 추가... jQuery 라이브러리 추가

2. fitvids 사용할 수 있는 html페이지에 <script> 추가

4. FitVids가 적용되는 영역을 <script>

5. css에 반응형이 적용되도록 추가

 

[ 반응형 웹 작성... 유튜브 삽입 ]

ㅇ project 추가

 

 

ㅇ boilerplate 추가

     - 템플릿처럼 WebContent에 복사해 와서 작성하려는 웹에 맞게 코딩을 수정한다  

        .

 

      

           

 

ㅇ jquery.fitvids.js 복사 : "WebContent" - "js" 아래에 "jquery.fitvids.js"를 복사한다.

 

ㅇ index.html에 코드 추가

1.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="js/jquery.fitvids.js"></script>

 

2.

 <section>

   <h2>Everything Is AWESOME!!!</h2>

   <p> -- The LEGO® Movie -- Tegan and Sara feat. The Lonely Island</p>

   <iframe width="560" height="315" src="//www.youtube.com/embed/StTqXEQ2l-Y" frameborder="0" allowfullscreen></iframe>

</section>

         <iframe width="560" height="315" src="https://www.youtube.com/embed/StTqXEQ2l-Y" frameborder="0" allowfullscreen></iframe>..레고

              <iframe width="560" height="315" src="https://www.youtube.com/embed/L0MK7qz13bU" frameborder="0" allowfullscreen></iframe>

                    ..... 유튜브 1개 더 추가(겨울왕국)

 

 

 

3.

<script>

     $(document).ready(function(){

          $(".main-container").fitVids();

     });

</script>

 

ㅇ main.css에 코드 추가 .... 반응형으로 개선한다.

1.    Author's custom styles 구역에 추가

video {  /*같은 사이트에 비디오가 있을 때*/

    max-width: 100%;

    height: auto;

}

iframe,        /*다른 사이트에 비디오가 있을 때*/

embed,

object {

    max-width: 100%;

}