Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyświetlenie filmu youtube (embed + fancybox)
Forum PHP.pl > Forum > PHP
L0k0
Witam!

Wyświetlam na stronie link do filmu na youtube używając <embed>:

  1. <embed width="420" height="345" src="http://www.youtube.com/v/<?php echo $file->get_property('filename'); ?>" type="application/x-shockwave-flash">
  2. </embed>

Chciałbym jednak aby kliknięciu na video otwierało się ono w nowym oknie FancyBox'a (jak zdjęcia). Niestety po umieszczeniu znacznika <embed> w znaczniku klasy FancyBox ten znacznik jest jakby w ogóle nie widzialny i film leci w normalnym okienku.
  1. <a class="fancybox-media" href="http://www.youtube.com/watch?v=<?php echo $file->get_property('filename'); ?>" title="<?php echo $file->get_property('description'); ?>">
  2. <embed width="420" height="345" src="http://www.youtube.com/v/<?php echo $file->get_property('filename'); ?>" type="application/x-shockwave-flash">
  3. </embed>
  4. </a>


Czy ktoś wie co powinienem zrobić, żebym widział podgląd filmu na stronie, a po kliknięciu w niego otwierał się oknie fancy-box?

Pozdrawiam!
pedro84
Zobacz w dokumentacji: http://fancybox.net/blog => 4. Show youtube clips
L0k0
Ja rozwiązałem sprawę tak, że włożyłem warstwę wyświetlającą video do warstwy fancybox'a.

  1. <div id='video_link_glowna'><iframe width="560" height="315" src="http://www.youtube.com/embed/<?php echo $file->get_property('filename');?>" frameborder="0" allowfullscreen></iframe>
  2. <div id='invisible_layer_glowna'><a class="fancybox-media" href="http://www.youtube.com/watch?v=<?php echo $file->get_property('filename');?>"><img style='width:560px; height: 315px;'src='/media/icons/youtube.png'></a></div>
  3. </div>


Kod css:

  1. #invisible_layer_glowna {
  2. position: absolute;
  3. left: 0px;
  4. top: 0px;
  5. width: 560px;
  6. height: 315px;
  7. border: solid 1px #ff0000;
  8. text-align: center;
  9.  
  10. filter:alpha(opacity=20);
  11. opacity: 0.2;
  12. -moz-opacity:0.2;
  13.  
  14. margin-left: 39px;
  15.  
  16. }
  17.  
  18. #video_link_glowna {
  19. position: relative;
  20.  
  21. filter:alpha(opacity=100);
  22. opacity: 1;
  23. -moz-opacity:1;
  24. }


Może się komuś przyda.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.