2015-07-22 3 views
1

Я беру видео-фото с youtube по iframe. Вы можете увидеть его, когда вы нажимаете кнопку HTML, чтобы фотография загружалась, но я также пытаюсь сделать фотографию для изменения видео в iframe после того, как я нажму на картинку. Спасибо всем..!Сделайте видеоролик, когда я нажимаю на изображение внутри iframe

Это HTML:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="index.css"/> 
</head> 
<body> 
    <header></header> 
    <nav> 
     <a target="page" id="img" onclick="html()" href="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg"> 
      <button>HTML</button> 
     </a> 
    </nav> 
    <iframe name="page" src="" frameborder="1"></iframe> 
    <footer></footer> 
</body> 
</html> 

Это JAVASCRIPT:

function html(){  
    var iframes = document.getElementById('iframes'); 
    iframes.innerHTML ='https://www.youtube.com/embed/bWPMSSsVdPk';  
} 

ответ

0

Является ли это что-то вроде того, что вы ищете?

<!DOCTYPE HTML> 
<html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <link rel="stylesheet" href="index.css"/> 
     <style> 
     .hidden { 
      display: None; 
     } 

     .shown { 
      display: ""; 
     } 
     </style> 
     <script> 
     function html(img) { 
      var iframe = document.getElementById("frame"); 

      img.setAttribute("class", "hidden"); 
      iframe.setAttribute("class", "shown"); 
     } 
     </script> 
    </head> 
    <body> 
     <header></header> 
     <nav> 
     <button>HTML</button> 
     </nav> 
     <img src="http://i1.ytimg.com/vi/bWPMSSsVdPk/hqdefault.jpg" frameborder="1" class="shown" id="image" onClick="html(this);"/> 
     <iframe id="frame" name="page" src="https://www.youtube.com/embed/bWPMSSsVdPk" frameborder="1" class="hidden"></iframe> 
     <footer></footer> 
    </body> 
</html> 

Вы можете поиграться с высоты и ширины атрибутах элементов, но это, как я бы добиться результата, который вы ищете.

+0

близко, только когда я нажимаю на фотографию, он покажет vedio, а не когда я нажимаю на кнопку :) возможно ли это? –

+0

Конечно, позвольте мне немного подкорректировать код. –

+0

Изменен код для вас. –

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