Как убедиться, что мой href превалирует над любыми другими слоями, включая flash?

Question

Я построил медиа-галерею для своего сайта. Медиагалерея содержит медиа-материалы с таких сайтов, как YouTube и Vimeo.

В системе, которую я использую, для медиа-элементов, на которые я ссылаюсь, не генерируется thumnail. Итак, я просто показал небольшой «просмотр» медиа в моей медиа галерее. Это означает, что я просто показываю небольшую версию встроенного видео в области сгруппированного списка. Это эффективно дает мне представление миниатюры медиа-элемента.

Затем я обертываю это встроенное видео в надежде на то, что ссылка перенесет их на страницу просмотра этого элемента мультимедиа на моем сайте. Если я добавлю видео, встроенное на YouTube, в - оно отлично работает, ссылка приведет посетителя на мою страницу медиа-элемента. Однако, если я обертываю видео Vimeo в ссылку, ссылка игнорируется, и при щелчке видео Vimdeo начинает воспроизводиться в очень маленьком представлении под залог.

Ах, как мне убрать встроенную область Vimeo из обработки щелчков? Есть ли CSS, который заставит меня поместить ссылку поверх видео Vimeo?

Любые предложения с благодарностью!

Answer 1

попробуйте что-то вроде этого. С z-index, работающим так же, как и для того, чтобы заставить a покрывать видео что-то, диапазон не должен оборачивать видео. Возможно, вам также понадобится указать некоторые условия высоты и ширины для диапазона.

<div class="vid_container">
<a href="#">
<span></span>
< your video tag >
</a>
</div>

.vid_container a{position:relative;}
.vid_container a span{display:block; position:absolute;top:0;left:0;z-index:200;}
.vid_container a videotag {display:block; position:absolute;top:0;left:0;z-index:1;}

Answer 2

«3D» позиционирование в веб-макетах ... сложно, если не сказать больше. Часть, о которой все знают, это стиль z-index. Но многие люди не понимают, что разница z-index между двумя элементами проявляется только в том случае, если они находятся на одной и той же глубине в DOM-дереве; если это не так, то тот, который находится выше в дереве (т. е. ближайший к тому, чтобы находиться непосредственно под телом), всегда будет "сверху", независимо от z-индекса.

Итак, теоретически, если вы поместите свой тег A выше в DOM, он должен иметь приоритет над видео. За исключением, может быть, не в IE. В IE определенные элементы (я точно знаю, что SELECT делают это, но видео, вероятно, тоже) всегда отображаются «выше» ... ну, все остальное. Обычный обходной путь для этого заключается в использовании другого из этих элементов (обычно IFRAME) в качестве фона для вашего контента. В качестве альтернативы есть библиотеки (такие как плагин bgiframe для jQuery), которые будут обрабатывать такие вещи для вас.

Если ничего из этого не работает, вы также можете просто попытаться подключить обработчик события «onclick» к A (или, может быть, даже к самому видео), а затем в этом обработчике сделать «e.stopPropagation ()» для предотвратить клик "пузыриться". Вы также можете выполнить «e.preventDefault ()», чтобы предотвратить действие по умолчанию при запуске фильма, но вы должны будете сделать это в фильме (или, если вы сделаете это в A, вам нужно будет сделать обработчик do "window.location = link ", так как это предотвратит действие A по умолчанию, т. е. переход к ссылке).

Надеюсь, что одна из этих идей работает на вас.