Добавить iframe и div в тело

Я новичок в Javascript. Я пытаюсь прикрепить div к телу, а затем iframe в div, то есть наложение, в котором я хотел бы загрузить видео. В IE10 не работает appendChild. Ни один элемент не создается. В IE11 создается оверлей, но iframe - нет.Добавить iframe и div в тело

Кроме того, в Chrome и в IE11 видео открывается на отдельной вкладке, а не в оверлейном div. Я пробовал несколько вариантов без успеха. Спасибо заранее.

<!DOCTYPE html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta name="description" content="" /> 
<title>Events | NO</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 
    var video = document.createElement("iframe"); 
    var overlay = document.createElement("div"); 
    $(".testimonial").click(function() { 
    document.body.appendChild(overlay); 
    $(overlay).addClass("overlay"); 
    overlay.appendChild(video); 
    video.name = "iframe_a"; 
    video.width = "600px"; 
    video.height = "400px"; 
    $(video).addClass("youtube-player"); 
    $(".overlay").show(); 
    $(".youtube-player").show(); 

    }); 

}); 
</script> 
<style> 

.overlay { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#000; 
    opacity:1; 
    z-index:50; 
    color:#fff; 
    display:none; 
} 

.youtube-player { 
    left: 50%; 
    z-index:1000; 
    width:600; 
    height:400; 
    display:none; 
    left: 0; top: 0; 
    height:0; width:0; 
    border: none; 

} 
</style> 

</head> 

<body> 

<h2>NFC Events</h2> 



<div class="events" style="width: 75%;"> 
<h3>August 2015</h3> 
    <h4>Katrina Remembrance Program</h4> 
    <p style="width: 55%;">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah 
Blah Blah Blah Blah </p> 

<ul> 
<li><a class = "testimonial" href="https://www.youtube.com/embed/xJ0Z-ty61w0?wmode=opaque" 
target="iframe_a">Watch the video</a></li> 

<li><a class = "testimonial" href="https://www.youtube.com/embed/rNM5HW13_O8?wmode=opaque" 
target="iframe_a">Watch the video</a></li> 
</ul> 


</div> 
</body> 
</html>

источник

2015-11-18 Totsy

Похоже, вы добавляете объект «Элемент», а не HTML-код объекта. Теперь с помощью jQuery, где вам не нужен внешнийHtml. Вам также необходимо предотвратить действие по умолчанию для тега, чтобы он не запускался на новой вкладке.

$(".testimonial").on("click", function(e) { 
    e.preventDefault(); 
    document.body.appendChild(overlay); 
    $(video).prop("src",$(this).prop("href")); 
    $(overlay).addClass("overlay"); 
    $(overlay).append(video); 
    video.name = "iframe_a"; 
    video.width = "320px"; 
    video.height = "240px"; 
    $(video).addClass("youtube-player"); 
    $(".overlay").show(); 
    $(".youtube-player").show(); 
});

Сообщите мне, если вам нужно больше деталей. Пример: https://jsfiddle.net/oor2pmhb/2/

источник

2015-11-19 00:25:56 aknatn

Я пытаюсь загрузить видео в iframe. Я думал, что externalHTML для текста. – Totsy

No externalHtml предоставит вам HTML-эквивалент вашего javascript-элемента, созданного с помощью document.createElement(). Позвольте мне посмотреть, смогу ли я получить образец для вас. Встаньте, если другой член SO не отправит один. – aknatn

Добавлен рабочий пример. – aknatn

Добавить iframe и div в тело

ответ

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