Question

我是通过iframe从youtube拍摄的视频照片。当您点击HTML按钮以便照片加载时，您可以看到它，但我点击图片后还尝试将照片更改为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';     
}

Answer 1

这是你想要的吗？

<!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>

您可能想要调整元素的高度和宽度属性，但这就是我要达到您正在寻找的结果的方式。

点击iframe中的图片时播放视频

1 个答案: