Баг IE: YouTube iframe, обёрнытый в ссылку

[SegaMega]

Всем добрый день.

В общем такая проблемка в IE:
вставляю на страницу YouTube-видео стандартным способом (т.е. через iframe), iframe обёрнут в другую ссылку-обёртку (например на google.ru)

После вставки плейера он отлично работает в Opera, Firefox, Chrome, но глючит в IE - если запустить ролик, то параллельно с работой плейера открывается новая вкладка с google.ru (я специально добавил в ссылке-обёртке атрибут target="_blank", чтоб увидеть "параллельность").

Если теперь вернуться на вкладку с нашим роликом, и попробовать остановить ролик, или изменить качество, звук... короче, при любом щелчке на плейере - параллельно открывается вкладка с google.ru

Даже если прописать у ссылки-обёртки onclick="return false", не помогает...

Вопрос: как убрать этот глючный переход? (Варианты обернуть iframe с роликом в DIV или удалить аттрибут href у ссылки-обёртки - не предлагать пожалуйста, интересен именно конкретный случай)

Создал для удобства пример http://jsfiddle.net/P24km/3/
Попробуйте открыть в IE и запустить ролик...

[SegaMega]

http://stackoverflow.com/questions/9...h-ie-rendering

[SegaMega]

[WorM32]

<a href="javascript:void(0)" ...

http://jsfiddle.net/P24km/8/

[SegaMega]

Спасибо, но это равносильно удалению аттрибута href у ссылки-обёртки, а нужно чтоб переход по ссылке был доступным

Пример: на странице есть ссылки-обёртки на ролики YT, в которые динамически (JS) вставляются соответствующие iframe с плейером и роликом YT, заменяя всё внутри ссылок-обёрток. Но если вдруг (0,01%) у юзера отключен JS или по какой-то причине ролик криво вставился, или на смартфоне/планшете нужно ролик посмотреть на сайте YT - нужна прямая кликабельная ссылка...

Вот у меня случай был (есть до сих пор): на смартфоне Galaxy S III, если просматривать страницу со вставленным YT в Firefox Mobile, то нет кнопки полноэкранного режима (100% баг YT или FireFox) - вообще нет и никакой возможности смотреть ролик в полный экран в остальных браузерах на мобиле всё ок...

Так вот если есть прямая ссылка на ролик YT, переходишь по ней на сайт YT и там уже можно смотреть во весь экран (если кто сталкивался с таким глюком - могу поскидывать ссылки по теме, много покопался)...

Я вообще заметил, что и приложения для смартфонов ВКонтакте и Одноклассники, и их мобильные версии открывают в новом окне (вкладке) ролики YT на сайте поставщика видеоконтента ))

Вот пример - во-первых плагина, который я юзаю для вставки YT-роликов, а во-вторых можно проверить в Firefox mobile, что ролик проигрывается, но нет кнопки fullscreen: http://www.tikku.com/jquery-youtube-tubeplayer-plugin

Но вообще, мне просто интересно понять, почему IE так конкретно отличается (впрочем как всегда) и почему такой баг...

[BETEPAH]

Но если вдруг (0,01%) у юзера отключен JS или по какой-то причине ролик криво вставился, или на смартфоне/планшете нужно ролик посмотреть на сайте YT - нужна прямая кликабельная ссылка...

ну, можно после загрузки страницы js-ом заменять href. Тогда те, у кого отключен js будут иметь прямые ссылки.
Какая часть среди 0.01% пользуется IE?

[SegaMega]

Спасибо, Ветеран.
Если честно, я уже решил свою проблему (ниже опишу как), однако почему IE обрабатывает любой клик по iframe, вставленный внутри ссылки, в частности ещё и как клик по этой ссылке, а вот др. браузеры - нет, я так и не въезжаю (( Тем более, что по спецификации HTML

Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. (http://htmlbook.ru/html/iframe)

Т.о. клик (например) по содержимому iframe никак не должен влиять на документ-родитель... Т.е. если мы возьмём такой код:

<a href="http://javascript.ru"><span>Текст в теге спан с родителем-ссылкой</span></a>

Если кликнем по спану, то логично, что будет переход и по ссылке (т.к. она родитель) - таково устройство DOM...

А вот если так:

<a href="http://javascript.ru"><iframe width="420" height="315" src="//www.youtube.com/embed/Ve5ELBEgAGM" frameborder="0" allowfullscreen></iframe></a>

то это уже вроде как отдельный независимый "документ" или точнее "объект", встроенный на основную страницу-родителя... и всякие клики по этому объекту не должны отражаться (если конечно это не ссылки или не обращение через JS к DOM родителя) на странице-родителе... Что нам отлично и демонстрируют все браузеры кроме IE, видно у него другой подход... почему и как это исправить - может кто знает теорию? Вопрос открыт...

Ладно, теперь как я решил свою проблему:
Есть на странице такой HTML-код:

<span><a href="http://youtu.be/eu9tnfEGrvU">Текст прямой ссылки ролик YT</a></span>

С помощью плагина http://www.tikku.com/jquery-youtube-tubeplayer-plugin и JS-магии вставляю с ютуба соответствующий ролик, получаю такой код (немного его упростил-уменьшил):

<span class="jquery-youtube-tubeplayer">
    <a href="http://youtu.be/eu9tnfEGrvU"></a>
     <iframe id="tubeplayer-player-container-717ee47b-94f0-4dea-af12-0181f2f43f26" frameborder="0" allowfullscreen="1" title="YouTube video player" src="https://www.youtube.com/embed/eu9tnfEGrvU"> </iframe>
</span>

в стилях для тега a и span прописываю (тоже только самое главное привожу):

span {
display: block;
position: relative;
}

span a {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20%;
display: block;
z-index:100;
}

Т.е. превращаю ссылку на ролик в полупрозрачную плавающую подсказку, которая в низу перекрывает ролик на 20%. При наведении курсора и запуске ролика эта подсказка прячется )) Вот как это выглядит:
YT.jpg

На смартфоне/планшете события "неведение мышки" как такового нет, поэтому подсказка-ссылка на ролик YT будет видна до тех пор, пока ролик не запустится...

[SegaMega]

Пример: на странице есть ссылки-обёртки на ролики YT, в которые динамически (JS) вставляются соответствующие iframe с плейером и роликом YT, заменяя всё внутри ссылок-обёрток.

Кстати, вот здесь я ошибся... Плагин не заменяет всё внутри обёртки, а просто добавляет iframe с видео...