Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Pojawienie się filmiku youtube po wklejeniu linku
Forum PHP.pl > Forum > Przedszkole
lekosm2
Witajcie, jak zrobić, że gdy wkleję w input link do filmiku youtube to nad tym inputem pojawi się iframe z filmikiem.

Przykład iframe .
  1. <iframe width="560" height="315" src="https://www.youtube.com/embed/JG34rEIyGhs" frameborder="0" allowfullscreen></iframe>


Podacie przykład jak to zrobić?
trueblue
1. Pobrać wartość z tego inputa.
2. Przefiltrować pod kątem poprawność (czy to link do YT).
3a. Jeśli ramki nie ma na stronie, to dodać ją wraz z poprawnym atrybutem src, ustawiony na wartość z punktu 2.
3b. Jeśli ramka jest na stronie, to (zmienić jej wyświetlanie z none na block i) ustawić jej atrybut src.

https://developer.mozilla.org/pl/docs/Web/A...nt/setAttribute
lekosm2
A zrobisz mi przykład?
Neutral
  1. <form method="post">
  2. <input type="text" id="text"/>
  3. <input type="button" id="btn" value="add"/>
  4. <input type="button" id="btn2" value="remove"/>
  5. </form>


Kod
function addElement () {
  // create a new div element
  // and give it some content

  var newDiv = document.createElement("iframe");
  newDiv.setAttribute('width',560);
  newDiv.setAttribute('height',315);
  newDiv.setAttribute('src',document.getElementById('text').value);
  newDiv.setAttribute('frameborder',0);
  newDiv.setAttribute('allowfullscreen','allowfullscreen');
  newDiv.setAttribute('id','divek');
  var newContent = document.createTextNode("Hi there and greetings!");
  newDiv.appendChild(newContent); //add the text node to the newly created div.

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}
function removeElement(){
    document.getElementById('divek').remove();
}
document.getElementById('btn').addEventListener('click',addElement,false);
document.getElementById('btn2').addEventListener('click',removeElement,false);

Template: https://developer.mozilla.org/en-US/docs/We...t/createElement
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.