Изменить html с помощью javascript

Я разрабатываю небольшое расширение для себя. Цель проста: вы нажимаете на расширение, вы вводите ссылку на YouTube, а видео воспроизводится внутри всплывающего окна.Изменить html с помощью javascript

Вот мой HTML

<body> 
    Youtube Link: <input type="text" id="link" name="firstname"> 
    <button type="button" id="do-link"> Go ! </button> 
    <script src="popup.js"></script> 
    <p id="write">Here your link</p> 
    <iframe id="ytplayer" title="YouTube video player" class="youtube-player" type="text/html" 
    width="640" height="390" src="https://www.youtube.com/watch?v=DTqTs15Hc9w" 
    frameborder="0" allowFullScreen></iframe> 
</body>

И мои JS:

var a; 
function link() { 
    a = document.getElementById('link').value; 
    document.getElementById('ytplayer').src = a; 
    console.log(a); 
} 
document.getElementById('do-link').onclick = link;

Так что это в основном просто напечатать в консоли, что внутри моего текстового поля. И он отображает видео KSI (или любое видео, которое вы хотите, если вы поместите ссылку hte.Я хочу знать, есть ли простой способ заменить ссылки на YouTube по ссылке, написанной пользователем в текстовом поле?

источник

2014-09-09 Nicolas Charvoz

http://www.youtube.com/questions/3730159/changing-iframe-src-with-javascript – theMarceloR

@theMarceloR: в кадре, потому что он установил «X-Frame-Options» в «SAMEORIGIN» ** Получил это в моем консольном журнале сейчас –

Вы можете изменить SRC IFRAME, но вам нужно будет использовать URL-адрес встраивания с Youtube, а не только страницу IFRAME на Youtube, иначе вы получите крест ошибка домена.

Кроме того, из URL Youtube, вам необходимо получить идентификатор видео и использовать его в ГКЗ встраивания

Редактирование кода:

HTML

`Youtube Link: <input type="text" id="link" name="firstname"> 
<button type="button" id="do-link"> Go ! </button> 
<script src="popup.js"></script> 
<p id="write">Here your link</p> 
<iframe id="iframe_id" width="640" height="390" src="//www.youtube.com/embed/u1vhQOOZUF4" frameborder="0" allowfullscreen></iframe>`

var a; 
function link() { 
    a = document.getElementById('link').value; 
    var videoid = youtube_parser(a); 
    var new_link = "https://www.youtube.com/embed/" + videoid; 

    document.getElementById('write').innerHTML = new_link; 
    document.getElementById('iframe_id').src = new_link; 
    console.log(new_link); 
} 
document.getElementById('do-link').onclick = link; 

function youtube_parser(url){ 
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/; 
    var match = url.match(regExp); 
    if (match&&match[7].length==11){ 
     return match[7]; 
    }else{ 
     alert("Url incorrecta"); 
    } 
}

Вот рабочая версия (скрипка): http://jsfiddle.net/x7mxos14/

Дополнительно: Использование Lasnv function для анализа.

источник

2014-09-09 15:14:49

Да, это то, что я видел на других постах, это просто расширение для меня, поэтому мне не нужно использовать парсер, но это очень хорошая идея, я просто использовал функцию replace() в js –

Просто замените iframe src с a внутри вашей функции щелчка.

источник

2014-09-09 15:00:44 theMarceloR

Изменить html с помощью javascript

ответ

Смежные вопросы