点击图片，播放视频

热爱前端的小君同学

于 2018-08-20 14:28:35 发布

阅读量1.4w

点赞数 6

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37815596/article/details/81870513

版权

前端专栏收录该内容

105 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="">
        <title>study</title>
        <style type="text/css">
            *{margin: 0;padding:0;}
            .index-vedio{width: 830px;height: 460px;margin: 50px auto;}
            .index-vedio img{width: 100%;height: 100%;}
        </style>
    </head>
    <body>
        <div class="index-vedio"><img src="./conter1.jpg"></div>
        <script>
              //视频播放
              var indexVedio = document.querySelector(".index-vedio");
              indexVedio.onclick = function(){
                indexVedio.innerHTML = "<iframe width=100% height='460' src='https://www.youtube.com/embed/aeyuLu9t0YE?rel=0&autoplay=1' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>";
              }
        </script>
    </body>
</html>