Спасибо, Ветеран.
Если честно, я уже решил свою проблему (ниже опишу как), однако почему 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 будет видна до тех пор, пока ролик не запустится...