Создайте div с iframe в jquery

-1

Когда кто-то нажимает на изображение, он будет затемнять экран и воспроизводится видео. Но это не работает, любая помощь будет оценена по достоинству. Спасибо. (Я использую загрузчик и fullpage.js)Создайте div с iframe в jquery

HTML: 
    <html> 
    <body> 
     <div class="row"> 
     <div class="col-lg-3"> 
      <img "myImg" scr="images/myimage.jpeg"  myVideo="https://youtube.com/embed/" width="100%"> 
     </div> 
     </div> 
     </body> 
     </head> 

    Jquery: 
     $("#myImg").click(function(){ 
    video = '<iframe src="'+ $(this).attr('myVideo') +'" width="600px"  height="auto"></iframe>'; 
     div = document.createElement('div'); 
     div.style.backgroundColor = "rgba(0,0,0,0.9)"; 
     div.style.position = "absolute"; 
     div.style.width = "100vw"; 
     div.style.height = "100vh"; 
     div.style.left = "0"; 
     div.style.top = "0"; 
     div.style.verticalAlign = "middle"; 
     div.html = video; 
     document.getElementsByTagName('body')[0].appendChild(div); 
     });

источник

2016-12-20 Matt Williams

Можете ли вы форматировать Ваш код - это очень трудно читать, как она есть. http://stackoverflow.com/help/formatting –

Есть несколько ошибок:

1) Ваш JQuery click событие ищет клик на элементе с идентификатором myImage, но ваш У изображения нет ID прямо сейчас. Измените <img "myImg" ... на <img id="myImage" ..., чтобы исправить событие click.

2) Вы ошибочно написали src (источник) как scr на своем <img>.

3) HTML установлен на элементах с использованием JS с .innerHTML, а не .html. Изменить div.html = video; на div.innerHTML = video;.

Изменение этих параметров приведет к выполнению кода. Предварительный просмотр его работы:

$("#myImage").click(function() { 
 
    video = '<iframe src="' + $(this).attr('myVideo') + '" width="600px"  height="auto"></iframe>'; 
 
    div = document.createElement('div'); 
 
    div.style.backgroundColor = "rgba(0,0,0,0.9)"; 
 
    div.style.position = "absolute"; 
 
    div.style.width = "100vw"; 
 
    div.style.height = "100vh"; 
 
    div.style.left = "0"; 
 
    div.style.top = "0"; 
 
    div.style.verticalAlign = "middle"; 
 
    div.innerHTML = video; 
 
    document.getElementsByTagName('body')[0].appendChild(div); 
 
});

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

 
<body> 
 
    <div class="row"> 
 
    <div class="col-lg-3"> 
 
     <img id="myImage" src="http://placehold.it/350x150" myVideo="https://youtube.com/embed/" width="100%"> 
 
    </div> 
 
    </div> 
 
</body>

источник

2016-12-20 19:18:49

Он работает, спасибо! –

ответ

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