Сохранение положения изображения при масштабировании видео

У меня есть несколько элементов сквозного щелчка по видео. При изменении соотношения сторон браузера позиционирование элементов беспорядочно, из-за чего действие клика не происходит, когда вы нажимаете на кнопку анимация.Сохранение положения изображения при масштабировании видео

Я использую%, но по какой-то причине он по-прежнему не позиционирует его правильно при нескольких размерах экрана.

CSS:

#vidKlik1{ 
    width: 8%; 
    height: 30%; 
    top: 148%; 
    left: 16%; 
}

HTML:

<div class="popup"> 
     <video preload="auto" autoplay="autoplay" loop="loop" id="background2"> 
      <source src="background/background2.mp4" type="video/mp4"> </source> 
      <source src="background/background2.ogv" type="video/ogg"> </source> 
      <source src="background/background2.webm" type="video/webm"> </source> 
     </video> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik1"> 
     </a> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik2"> 
     </a> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik3"> 
     </a> 

     <a href="#popup-box" class="popup-window"> 
      <img src="images/klik.jpg" id="vidKlik4"> 
     </a>   
    </div>

и по какой-то причине я должен использовать топ: 148%, потому что если я беру верх: 100% она позиционирует его 50% от в верхней части страницы, между двумя видео

Есть ли способ исправить это? Я уже использую%, но по какой-то причине он просто не будет правильно позиционировать изображение. Я также пытался использовать VH и VW, я просто не знаю, какие другие вещи я мог бы сделать, чтобы изображение всегда отображалось на определенная позиция, когда видео позади нее масштабируется.

Вкратце: у меня есть изображение, которое я хочу масштабировать с видео позади него, чтобы сделать видео с интерактивным взаимодействием, однако оно часто идет слишком далеко вниз.

источник

2014-11-19 Gerwin

Не могли бы вы опубликовать некоторые соответствующий код с видео. Решение прост, ваше видео и ссылка должны быть в контейнере. Затем контейнер захватывает и высоту видео. Ссылка расположена поверх видео (позиция: absolute; z-index: 1000), и она будет перемещаться в соответствии с контейнером. Я могу привести пример, но мне нужен код для работы. –

@ vyx.ca Я отредактировал свой вопрос, чтобы у него было больше кода, однако я попытался сделать то, что вы предложили, в качестве одной из первых вещей, однако это не сработало, как я хотел, возможно, я сделал что-то не так – Gerwin

Чтобы следить за моими комментариями, here's a working fiddle

CSS

.popup { 
    position:relative; 
    width:75%; 
} 

.popup video { width:100%;} 

.popup a { position:absolute; z-index:1000;} 

#vidKlik1 { top:5%; left:5%; }

HTML

<div class="popup"> 
    <video preload="auto" autoplay="autoplay" loop="loop" id="background2"> 
     <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> 
     <source src="http://vjs.zencdn.net/v/oceans.webm"></source> 
    </video> 

    <a href="#popup-box" class="popup-window" id="vidKlik1"> 
     <img src="http://placehold.it/50x50" /> 
    </a> 
</div>

Важные детали

popup потребности быть position:relative
в <a> должен иметь идентификатор так что вы можете поместить его независимо от других

источник

2014-11-19 13:56:10

Использование вашего кода sortof разбивает веб-сайт, так как мой код jQuery не отображает мои изображения. – Gerwin

@Gerwin Они не становятся видимыми, потому что вы используете идентификаторы в своем jQuery? Если это так, это не проблема ... сохраните идентификаторы на изображениях и используйте другие идентификаторы ссылок. Подобно этому http://jsfiddle.net/masu1mko/4/ –

Они не становятся видимыми с использованием следующего кода, при удалении они становятся видимыми; .popup { позиция: относительная; ширина: 100%; } .popup видео {ширина: 100%;} .popup a {position: absolute; z-index: 1000;} только что изменился .popup на #test, и он исправил проблему. – Gerwin

Браузеры могут быть несовместимы с тем, как они ведут себя при изменении разрешения экрана или ориентации. Для последовательного поведения в браузерах вы хотите использовать jQuery (так как вы указали в своих тегах) для обработки события изменения размера и пересчитать свою всплывающую позицию на основе новых размеров окна и/или позиции видео.

источник

2014-11-19 13:30:10 Blake

Я предполагаю, что это не сработает, потому что соотношение сторон экрана не совсем то же, что и видео, поэтому проценты не обязательно эквивалентны. Когда вы изменяете размер окна, есть ли черные полосы на любой стороне видео? Эти черные области будут возиться с вашими процентами.

источник

2014-11-19 13:34:46

Сохранение положения изображения при масштабировании видео

ответ

Смежные вопросы