Materialize에서col류와video-container는 같은 표시에서 사용할 수 없습니다

5619 단어 MaterializeCSS

개요

  • Materialize의 비디오-container 클래스를 사용하면 유튜브 같은 애니메이션을 삽입하여 간단하게 응답할 수 있어 편리하다
  • https://materializecss.com/media-css.html
  • 하지만 사용법이 틀리면 애니메이션이 나오지 않으니 주의해야 한다

    • 코드


    안 되는 예, 정확한 예, 비디오-container를 사용하지 않는 노력의 예, 각자의 코드
    video-container.html
    <html>
    <head>
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 
    </head>
    <body>
        <div class="row">
            <!-- colとvideo-containerを同じdivで使うと動画が出てこない -->
            <div class="col s4 video-container">
                <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"></iframe>
            </div> 
            <!-- colとvideo-containerを入れ子にするとちゃんと出てくる -->
            <div class="col s4">
                <div class="video-container">
                    <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0"></iframe>
                </div>
            </div>
            <!-- 参考: 自力でレスポンシブ対応する場合 -->
            <div class="col s4">
                <div style="position: relative; width: 100%; height: 0; padding-top: 56.25%">
                    <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0" 
                    style="position:absolute; top:0; left: 0; width: 100%; height: 100%"></iframe>
                </div>
            </div>
        </div>
    </body>
</html>

    실행 예


    잘못 쓰면 왼쪽처럼 아무것도 안 나와요.

    비고


    비디오-container를 사용하지 않을 때의 설명


    투덜거리면 많이 나오지만 번거롭기 때문에 프레임의 기능을 성실하게 이용하는 것이 좋다
    만약 당신이 위의 코드에서 Materialize가 의존하는 부분을 제거한다면 이렇게 될 것이다
    responsive-ganbaru.html
                    <div style="position: relative; width: 100%; height: 0; padding-top: 56.25%">
                    <iframe src="https://www.youtube.com/embed/M1RIUrgJqWw" frameborder="0" 
                    style="position:absolute; top:0; left: 0; width: 100%; height: 100%"></iframe>
                </div>
    언뜻 보니 왜 이렇게 움직였는지 알기 어렵다
  • 패딩-top으로 바깥쪽의div와 요소의 폭이 일치하는 높이의'상자'를 제작한다.원래 요소의 높이가 거추장스러워 0으로 설정했다.
  • padding-top% 를 지정하면width 비례에 대한 요소의 값을 padding합니다
    • .따라서 16:9 상황에서 9/16=56.25%로 설정하면width의 56:25% 높이의 상자를 형성하여 기분이 좋다
  • https://developer.mozilla.org/ja/docs/Web/CSS/padding-top
  • 안쪽에 있는 iframe에서 요소가 왼쪽 위부터 위치조정+주어진 상자의 크기를 모두 사용하도록 지정합니다
    • 그런 것 같습니다.

    샘플에 사용된 영상 is는 누구에게


    스펙트럼 #17 <병아리>[오리지널 뮤직비디오]
    https://www.youtube.com/watch?v=M1RIUrgJqWw
    다들 들어봐.
    ✨ 모듈은 시스템에서git 사용자 설정을 읽고 JSON 대상으로 되돌려줍니다.
    ElasticSearch 통합 작업

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage