通过a标签在页面上显示视频网站中的视频

1、把视频传到优酷、腾讯等视频网站中

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        .video .mask{

            display:none;

        }

        .video{

            width:100%;

            position:relative;

        }

        .cc{

            width:60px;

            height:30px;

            background:red;

            z-index:999;

            position:absolute;

            left:736px;

            top:10px;;

        }

    </style>

</head>

<body>

<div class="video">

    <iframe src="2.html" style="width:800px;height:520px" class="c21"></iframe>

    <div class="cc"></div>

</div>

</body>

<script src="jquery.js"></script>

<script>

    $(".video").hover(function(){

        $(".video-btn").css("display","none");

        $(".mask").css("display","block")

    },function(){

        $(".video-btn").css("display","block");

        $(".mask").css("display","none")

    })

    $(".cc").on("click",function(){

        $(".c21").attr("src","2.html")

    })

</script>

</html>

主页

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .video-btn,.mask{

            position:absolute;

            top:50%;

            left:50%;

            margin-top:-75px;

            margin-left:-75px;

        }

        .video-bg{

            width:100%;

        }

    </style>

</head>

<body>

<a href="http://v.qq.com/iframe/player.html?vid=u0133b4ownh&amp;auto=1&amp;tiny=0" data-lightbox-type="iframe" class="open-video cbp-lightbox">

    <img class="video-btn" src="video_play.png">

    <img class="mask" alt="" src="video_play_hover.png">

    <img src= "service_banner.png" class="video-bg"/>

</a>

</body>

</html>

iframe页

2、在主页中添加一个iframe标签，并设置好宽高，然后弄个div定位在iframe的右上角（用来作为关闭iframe的按钮）

3、把视频路径放到iframe页面中的a标签。然后在a标签中添加默认的背景图等。