-webkit-column-count 3, только видео работает в 1-м столбце, нет видео в 3-м и 3-м столбцах

Question

Привет, я использую HTML5 тег видео. Я использую -webkit, чтобы использовать вид макета. У меня проблема с показом видео. Видео показывается только в первом столбце, во втором и третьем столбцах нет видео. Но я слышу звук, который подтверждает, что видео работает нормально, но что-то блокирует. Я попытался удалить webkit и попытался изменить макет, но все видео работают нормально.

вот мой css

<style type="text/css">
    #wrapper1 {
        width: 90%;
        max-width: 1100px;
        min-width: 800px;
        margin: 50px auto;
    }

    .pin1 {
        display: inline-block;
        background: #FEFEFE;
        border: 2px solid #FAFAFA;
        box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
        margin: 0 2px 15px;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        column-break-inside: avoid;
        padding: 15px;
        padding-bottom: 5px;
        background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
        opacity: 1;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        transition: all .2s ease;
        z-index: 10;
    }

        .pin1:hover {
            background-color: #F3F5D5;
        }

    #columns1 {
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        -webkit-column-fill: auto;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        -moz-column-fill: auto;
        column-count: 3;
        column-gap: 15px;
        column-fill: auto;
        z-index: 10;
    }
</style>


  <div id="wrapper1">
        <div id="column1">
            <div class="pin1">
                <video id="Video1" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video2" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="540" style="z-index: 2; vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video3" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="340" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video4" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video5" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>

            <div class="pin1">
                <video id="Video6" class="projekktor" poster="intro.png" title="this is projekktor" width="300" height="240" style="vertical-align: top;" >
                    <source src="Projekktor/media/intro.mp4" type="video/mp4" />
                </video>
            </div>
        </div>
    </div>``

Может ли кто-нибудь помочь мне в этом.

Answer 1

У меня была такая же проблема со ссылками, не работающими, особенно в Chrome, когда у меня был счетчик колонок webkit. Оказывается, что если установить webkit-backface-visibility в скрытое состояние, мои ссылки не работают. Как только я избавился от этого из своего CSS, они снова начали работать. Вы можете попробовать это и посмотреть, исправит ли это.