Ładowanie iframe (player) po kliknięciu w przycisk/obrazek

Dla specjalistów Webmastering
#1

Witam chciałbym zrobić na stronie przycisk po którego kliknięciu będzie ładował się player z filmikiem w iframe.

Potrzebuję tego ponieważ filmik od razu się włącza ,a chciał bym aby działał dopiero po kliknięciu.

#2

Bardzo prosto to wykonać w JS/jQuery. Po kliknięciu w obrazek zmieniasz, wartość atrybutu src w znaczniku iframe.

#3

Możesz podać przykładowy kod bo dopiero zaczynam naukę i nie ogarniam jak to zrobić.  :D

#4

Ustaw tak w HTML

<iframe src="link-do-obrazka" id="player" onclick="wlaczOdtwarzacz()"></iframe>

i teraz js

<script>
var odtwarzacz = document.getElementById('player');

function wlaczOdtwarzacz() {
    odtwarzacz setAttribute('src', 'link-do-playera-z-filmem');
}
</script>

powinno działać

#5

Nadal coś nie działa wyświetla się obrazek ale jest nie klikalny.

PS.

W miejscu link-do-playera-z-filmem mam podać cały kod iframe playera wraz z linkiem ?

#6

Przecież, żeby wyświeltlić coś w iframe, to musisz dodat do tego czegoś link w atrybucie src. Nie masz linku do filmu ??

#7

To jest coś takiego mam szablon w którym mam wstawiony taki kod playera:

<iframe width="640" height="360" src="{full-story}" frameborder="0" allowfullscreen></iframe>

w miejscu  {full-story} jest podstawiany link do filmu (w każdym artykule inny).

Mógł byś przykładowo wypełnić moimi danymi ?

Sorki ale jak już wspominałem jestem zielony :slight_smile:

#8

to wstaw to jako link, tak jak tutaj:

odtwarzacz setAttribute(‘src’, ‘{full-story}’);

#9

Nadal nie działa wyskakuje obrazek ale tak jak wyżej jest nie klikalny.

Nie wiem możliwe że coś źle zrozumiałem lub ty ale chodzi o takie coś jak np. tutaj:

http://efilmik.pl/film/thor-mroczny-swiat-thor-the-dark-world-2013   (Obrazek “Zacznij Seans”)

#10

Tu prawdopodobnie jest błąd

 

odtwarzacz setAttribute(‘src’, ‘link-do-playera-z-filmem’);

 

nie dodałem kropki, wklej to

 

odtwarzacz . setAttribute(‘src’, ‘link-do-playera-z-filmem’);

#11

Dalej to samo co było, a jeszcze bo ja dodaje jeden kod, a pod nim drugi czyli dobrze ? :slight_smile:

#12

Dobra, już mam rozwiązanie. W HTML dodajesz diva zamiast iframe’a. Zatem, do HTML dodajesz:

<div id="video" onclick="wlaczVideo()"></div> <!-- W css'sie dostosuj wilekość i wysokość. Także dodaj właściwość background, w której ustaw ścieżkę do obrazka -->

potem to:

<script>
  var video = document.getElementById('video');
  
    function wlaczVideo(){
    
      video.innerHTML='<iframe src="{full-story}"></iframe>';
      
    }
</script>
#13

Chłopcy! A znacie taki myk: http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm Nie wymaga JSa :smiley:

#14

Wielkie dzięki jacko1998 i Jim1961  (Podziałała metoda jacko)

#15

A “moja” nie działa ??

#16

Nie sprawdzałem :smiley: ale zaraz sprawdzę i dam znać :slight_smile: