Новая тема   Ответить

 SMYK
Добрый день.
Нужно вставить картинку поверх плеера youtube (чужое видео будет на моем сайте показываться). Как осущиствить сию магию?
Результат должен выглядеть где-то так:
https://www.dropbox.com/s/my7aqp3d2p7rkeg/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA.JPG


Заранее спасибо + рейтинг за конструктивность)))

 xNutsx
camtasia studio. рейтинг не надо, если акк на серче есть, поставь мне плюсик там =).

 SMYK
Хорошая прога. Спасибо, но только , кажется, не для того она что мне нужно. На серче не тусуюсь, сорри. Попробую сформулировать поточнее задачу.

Я сам формирую в своих постах код плеера и вставляю только адрес видео. Выглядит все это так
<iframe width="640" height="375" src="http://www.youtube.com/embed/xm7DUpL4FOI?autoplay=1&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>

И как я думаю всю эту хрень нужно как-то поместить в дивы, чтобы поверх этого эмбедед видео накладывалась бы моя картинка. Думаю вполне реализуемо, только у меня пока коряво все выходит.

 xNutsx
ну эта прога вставляет картинку конкретно в видеоролик, а тебе тогда как я понял тогда надо это через css решать, это тогда к спецам web кода вопрос, я в етом нуб.

 spasibo1337
у меня примерно так. только размеры поправить надо. ну и прозрачность тут 90%

#player {
   position: relative;
   overflow: hidden;
   height: 705px;
   width: 900px;
}

#playerinfo {
   background: url(http://тут картинка) no-repeat;
   -moz-background-size: 100% 100%;
   -webkit-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100%;
   height: 50px;
   width: 100%;
   position: absolute;
   left: 0px;
   top: 0px;
   opacity: 0.9;
   filter: alpha(opacity=0.9);
   -moz-opacity: 0.9;
   z-index: 99;
}


<div id="player">
<div id="playerinfo"></div>
<iframe width="100%" height="100%" src="http://...></iframe>
</div>

 SMYK
В хроме все ок, а вот в ИЕ и в FF3 (в новом не проверял) тестовая картинка уходит под плеер и не видна

 spasibo1337
хз. у меня в IE10 и FF22 вроде норм все. у меня просто не youtube в iframe
тогда вот тут смотри)
https://www.google.com/search?hl=en&q=css+div+over+iframe

http://stackoverflow.com/questions/16425740/cross-browser-absolute-…ver-iframe
Цитата:

 SMYK
Спасибо. Добавил в урл параметр ?wmode=opaque вроде все ок

Правда в режиме full screen все пропадает((( Поищу, если че и тут можно придумать

 Mistic
в режиме фулскрин ничего не придумаешь, а если получится, то дай знать...