заменить src="" во фрейме

119

07 февраля 2022, 18:10

При вставке в форму кода от видео ссылки, необходимо что бы данное видео проигрывалось в плеере ниже. например youtube.com/watch?v=tHZXqpEpAik код=tHZXqpEpAik То есть вставив код и нажав Go.

src="" во фрейме передалось нужное значение.

<meta charset='UTF-8'> 
<style> 
  body { 
    background: #EDEDED url(https://lh3.googleusercontent.com/xW7UB2DqQqUjoaurjIZ9hEKsn8cyXXZ0_ZTSKbReSxYvRv-9zFJUejzU_DQY0vsSGMyWw=s85); 
    color: #000000 
  } 
</style> 
<center> 
  <div> 
    <form action="https://www.youtube.com/embed/" onsubmit="this.action+=this.elements.results.value" method="POST"> 
      <input type="text" name="results" value=""> 
      <input type="reset"> 
      <input type="submit" value="Go"> 
    </form> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/A7ZaI-hhVJI" frameborder="0" allowfullscreen> 
    </iframe></div> 
</center>

Answer 1

Используем для этого самый обычный JavaScript.

Сначала удалим из формы action, т.к. нам не надо выполнять get/post запрос. submit заменим на button и добавим к нему onClick, в который напишем название функции, которую сразу же и напишем.

Наша цель:

Получить значение текстового поля. Для этого мы даём ему id, и при помощи document.getElementById получаем текстовое поле и его значение (value).
Сгенерировать iframe с новой ссылкой. Тут есть нюанс - нельзя просто так вставить ссылку с ютуба в iframe, нужно заменить в ссылке watch на embed, только так будет работать (смотрим код чтобы понять). Преобразуем ссылку, создаем переменную с кодом iframe и новой ссылкой.
Вставить новый iframe вместо старого. Для этого мы оборачиваем iframe (тот что изначально показывается) в div, задаём ему id, находим его так же как и текстовое поле, и меняем innerHTML (содержимое) на переменную с новым iframe. Вуаля!

P.S.: JS код можно поместить между тегами <script></script> перед закрывающим тегом </body>

//находим div c iframe 
var iframeContainer = document.getElementById("videoblock"); 
	 
//функция выполняется при клике на кнопку 
function ChangeVideo() { 
    //получаем значение поля 
    var videoUrl = document.getElementById("url").value; 
    //преобразуем ссылку, иначе видео не вставится		 
    videoUrl = videoUrl.replace("watch?v=", "embed/"); 
	 
    //генерируем новый iframe 
    var iframeCode = '<iframe width="560" height="315" src="' + videoUrl + '" frameborder="0" allowfullscreen></iframe>'; 
    //вставляем новый iframe в контейнер 
    iframeContainer.innerHTML = iframeCode; 
}

<html> 
<body> 
    <form> 
      <input type="text" id="url" value=""> 
      <input type="reset">	   
      <input type="button" value="Go" onClick="ChangeVideo()"> 
    </form>     
     
    <div id="videoblock"> 
        <iframe width="560" height="315" src="https://www.youtube.com/embed/A7ZaI-hhVJI" frameborder="0" allowfullscreen></iframe> 
    </div> 
</body> 
</html>

P.P.S.: !В сниппетах этого сайта код iframe не выполняется! Чтобы убедиться в работоспособности, нужно скопировать код и запустить у себя на компьютере