<style>#V123456 .Vimg { width: 100%; height: 100%; background-color: #000; -moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ -o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ -webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ background-position: center; /*置中*/ background-repeat: no-repeat; /*背景圖案不重複*/ background-image:url(http://i2.wp.com/www.cgmeetup.net/home/wp-content/uploads/2015/05/Avengers-Age-of-Ultron-UI-Reel-1.jpg);} #V123456 .Viframe { width: 100%; height: 92%; display: none;} .Vimg:before { display: block; content: ''; position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border: 5px solid #fff; /*劃圓 線闊及顏色*/ border-radius: 50%; /*劃圓*/} .Vimg:after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -20px 0 0 -10px; border-left: 40px solid #fff; /* 劃出三角形*/ border-top: 25px solid transparent; /* 劃出三角形*/ border-bottom: 25px solid transparent; /* 劃出三角形*/ } #V123456 .Vimg:hover:before { border-color: #f00;} #V123456 .Vimg:hover:after { border-left-color: #f00;} </style> <div id ="V123456" onclick="VFunction(this.id)"><div class="Vimg videoPoster"> </div> <iframe class="Viframe" src="" ></iframe><iframe class="Viframe" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div><script>function VFunction(x) { var xxx = document.getElementById(x); xxx.getElementsByClassName("Vimg")[0].style.display = "none"; xxx.getElementsByClassName("Viframe")[0].style.display = "block"; xxx.getElementsByClassName("Viframe")[0].src = "https://www.youtube.com/embed/hgzzLIa-93c?rel=0&controls=1&showinfo=0;autoplay=1"; } </script>

00