Блог

Главная - Вопросы по программированию - Как покрыть миниатюру видео iframe на 100% оберткой в соотношении сторон 9:16?

Как покрыть миниатюру видео iframe на 100% оберткой в соотношении сторон 9:16?

#javascript #html #css #iframe

Вопрос:

Я использую тег iframe для воспроизведения видео с соотношением сторон 9:16 с моего Google диска. Iframe обернут вокруг div, и div стилизован так, чтобы не было черных полос. Видео сохраняет свое соотношение сторон, но миниатюра-нет. Миниатюра покрывает всю высоту обертки, но не ширину. Я хочу, чтобы миниатюра также сохраняла соотношение сторон 9:16.

Кроме того, я не добавил пользовательский эскиз.

 .potrait_9by16
   {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 177.777%; /* 9:16 Aspect Ratio*/
   }

.potrait_9by16 iframe 
  {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 100%;
 } 
 <div className="potrait_9by16">
     <iframe            
        width="100%"
        height="100%"
        frameborder="0"
        src={videoObject.src}
        allow="fullscreen"
     ></iframe>
</div>

Вот изображение обертки

Ответ №1:

Попробуйте ниже по адресу https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video:

 <!DOCTYPE html>
<html>
<body>

<style>
div.outer { overflow: hidden }
div.outer > div.inner { position: relative; margin: 0 -109.7283%; padding: 88.8888888% 0; overflow: hidden }
div.outer > div.inner > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
</style>

<div class="outer">
<div class="inner">
<iframe width="100%" height="100%" src="https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview">
</iframe>
</div>
</div>

</body>
</html>

Однако это может испортить воспроизведение видео. Элементы управления видео (индикатор выполнения и т.д.) обрезаются при запуске воспроизведения.

Замените код там тем, который я предоставил.

Я только что проверил ваш код, и, похоже, вам нужно:

 .x { overflow: hidden }
.neg { position: relative; margin: 0 -109.7283; padding: 88.8888888% 0 }
.neg > iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

и используйте только класс x для внешнего div, только класс neg для внутреннего div. Этого, вероятно, должно хватить.

Я думал об удалении отрицательного поля при воспроизведении и экспериментировал с чем-то в этом роде, но не удосужился завершить его. В какой-то степени это должно сработать, но я обнаружил, что миниатюра с черной рамкой может отображаться в течение короткого времени до начала воспроизведения (по крайней мере, так, как я это пробовал). Если это нормально, вы могли бы попробовать этот метод. Я думал о том, чтобы отобразить невидимый div (прозрачное наложение), покрывающий iframe, который может захватить щелчок и переключить src iframe на автозапуск=1 URL. Посмотрим, сможешь ли ты заставить это работать. Если у меня будет немного времени, я могу продолжить изучение этого вопроса.

Я добавлял div с использованием JavaScript в том же стиле, что и iframe, сразу после iframe:

 .overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0 }

Если этот div будет добавлен последним, он уже будет самым верхним. В противном случае используйте z-индекс.

Затем обработайте событие «щелчок» в div.

Описанная выше техника наложения div имеет свои ограничения. Приведенная ниже техника может быть лучше:

 <!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>Player</title>
    <div id="player"></div>
 
 body { background: #efe; padding: 2em; color: #575 }
h1:first-child { margin-top: 0 }

.player, #player { overflow: hidden }
.player > div, #player > div { position: relative; padding: 88.88888% 0; overflow: hidden }
.player video, .player iframe,
#player video, #player iframe
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0 }
.player:not(.playing) > div, #player:not(.playing) > div
{ margin: 0 -109.7283% }
 
 ((W, D) => {
    let $ = a => document.getElementById(a)
    class Player {}
    Player.play = (id, url) => {
        let p = $(id)
            , f = D.createElement('iframe')
            , d = D.createElement('div')
        f.src = url
        f.setAttribute('frameborder', 0)
        f.height =
        f.width = '100%'
        f.addEventListener( 'mouseover', e => f.dataset.overMe = 1 )
        f.addEventListener( 'mouseout', e => delete f.dataset.overMe )
        W.addEventListener( 'blur', e => {
            if (f.dataset.overMe === '1')
                setTimeout(a => p.classList.add('playing'), 1000)
        } )
        p.innerHTML = ''
        d.appendChild(f)
        p.appendChild(d)
    }
    W.Player = Player
})(window, document);

Player.play('player', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')

Посмотрите, можно ли использовать это последнее обновление с несколькими кадрами iframe…

Ваша проблема может быть связана с тем, что вы, возможно, используете идентификатор (возможно, один и тот же идентификатор) для всех игроков. При использовании нескольких плееров divs вам необходимо использовать уникальные идентификаторы и использовать class=»игрок» для divs вместо id=»игрок».:

 <div id="player-1" class="player"></div>
<div id="player-2" class="player"></div>
<div id="player-3" class="player"></div>

Если это все еще не работает, покажите мне демонстрационную версию (возможно, на вашем сайте), и я посмотрю. Вызовите метод воспроизведения с идентификатором типа

 Player.play('player-1', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')
Player.play('player-2', 'https://drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/preview')

Комментарии:

1. Я использую точно такую же разметку, которую вы предоставили. Единственная разница в том, что высота и ширина встроены в ваши. Я использую видео в 9:16 с моего Google диска. Когда видео запускается, оно не имеет черных полос и поддерживает соотношение сторон 9:16. Единственная проблема-с миниатюрой.

2. Я имел в виду, что высота и ширина задаются в теге iframe. Я скопировал и вставил ваш точный код в свой файл. Это все то же самое. Миниатюра, не поддерживающая соотношение сторон 9:16. Кроме того, что значит «поделиться своим видеоплеером»? Я использую тег <iframe>, свойство src имеет значение ‘<iframe> drive.google.com/file/d/16iDKGJXBszk2nI9h9BNG3rJ2zD85FSNy/… ‘. Я предполагаю, что плеер-это плеер YouTube. Попробуйте использовать тег по этой ссылке. Посмотрите, возникнет ли у вас та же проблема, и, пожалуйста, сообщите мне об этом. Спасибо

3. Это странно. Когда я нажимаю ссылку на Google диск, миниатюра имеет то же соотношение сторон, что и видео. Кроме того, я проверил миниатюру изображения с помощью инструментов разработки Google chrome и обнаружил, что размеры изображения составляют 640×360, что составляет 16:9. Таким образом, сама миниатюра не является проблемой. Каким-то образом изображение миниатюры растягивается и искажается. Я подозреваю, что iframe не должен воспроизводить подобные видеоролики potrait. Могу ли я каким-то образом настроить таргетинг на тег <img>, который создается в браузере? [продолжение ниже]

4. [продолжение] Кроме того, я обнаружил, что когда я нажимаю кнопку воспроизведения видео, появляется другая кнопка воспроизведения (например, та, которую вы видите на YouTube), и видео приостанавливается в 0:00 в ожидании воспроизведения. В данный момент, поскольку миниатюры нет, а оболочка видео выглядит именно так, как я хочу. Мне было интересно, могу ли я программно нажать «белую» кнопку воспроизведения при загрузке страницы. Кроме того, у вас не сработало решение отрицательной маржи. Но спасибо, что попытались. Я действительно ценю это.

5. Весь экран миниатюр-9:16, потому что, когда я проигрываю видео, черных полос нет, а видео-9:16. Изображение большого пальца вытянулось.

Метки: