API iframe YT JS, перезагрузите фрейм с введенным пользователем значением

Question

Попытка заставить YT iframe динамически менять видео. В настоящее время используется статический идентификатор видео и вы хотите, чтобы пользователь вводил его через форму. Функция onPlayerReady вызывает другую функцию initalize(), которая принимает значение данных формы и регистрирует его. Кнопка отправки по нажатию также вызывает эту функцию инициализации. Однако при нажатии кнопки "Отправить" страница обновляется, и значение переменной исчезает, и ее невозможно зарегистрировать и использовать для перезагрузки iframe. Есть идеи, как мне решить эту проблему?

Answer 1

Попробуйте передать входное значение непосредственно в функцию, которая изменяет iframe src, вместо использования submit.

Пример:

var userSrc = document.querySelector("#yourInputId");

if(userSrc.value.length > 1){
   updateSrc(userSrc.value);
}

Вам необходимо изменить код, если вы используете заполнитель в качестве входных данных или что-то, что может повлиять на длину.

Если вы все еще хотите использовать submit, вам, вероятно, нужно каким-то образом сохранить свои данные. Но я не рекомендовал бы это, так как это не удобно для пользователя, чтобы обновить страницу просто, чтобы изменить src.

редактировать
Я положил что-то быстро вместе, это работает. Этот codenippet будет обновлять src без какого-либо обновления пейджера / iframe. Вы также можете захотеть загрузить функцию после загрузки проигрывателя в DOM, чтобы сделать это, вы можете создать условие, которое проверяет состояние проигрывателя (эта функция поставляется с образцом из документации Google).

function loadVid(){
  var videoId = document.querySelector("input[name=vidId").value;

  if(videoId.length > 0){
    player.loadVideoById(videoId);
  } else {
      alert("You need to enter an video id");
    }
}

У Google есть полезный шаблон для начала, если вы еще не проверили его.