Question

Я встроил изображение youtube с сервера youtube, которое равно «http://img.youtube.com/vi/0.jpg",, теперь в середине изображения нет кнопки воспроизведения, как мы видим обычно любые видео на YouTube!

Я пытался использоватьследующий код, чтобы получить изображение поверх изображения YouTube, но оно показывает большую картинку, я знаю, почему

<a class="fancybox" href="#video">
<img src="/wp-content/themes/mytheme/images/play_button.png" no-repeat width: 0px height:0px; style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) transparent" width="180" height="150"/>

<div id ="video">
// here is my embedded youtube usual code
</div>

оба изображения показаны в размере 180 x 150, но этоне то, что я хочу.

Я хочу, чтобы изображение YouTube отображалось в размере 180 x 150, а изображение кнопки воспроизведения (play_button.png) будет отображаться в середине изображения YouTube в небольшом размере.

Любая подсказка в CSS или кодирование в PHP будет большой пользой.

Miguel A. Friginal · Answer 1 · 02 февраля 2011

Я разобрался довольно легко.Просто создайте изображение с помощью кнопки воспроизведения посередине и сделайте окружение прозрачным, а затем я поместил это изображение поверх эскиза YouTube.это сработало, но видеоизображение перестраивается, но выглядит не плохо.

<a class="fancybox" href="#bizgenevideo">
<img src="/wp-content/themes/mytheme/images/play-button.png" style="background: url(http://img.youtube.com/vi/<?php echo $youtubeid ; ?>/0.jpg) " width="180" height="148"/>