如何更改iframe youtube播放按钮的设计

Question

如何使用css和angular4

更改iframe youtube播放按钮的设计

youtube.html

＆＃13;

＆＃13;

<div>
  <iframe class="video" src="https://www.youtube.com/embed/vqxvEUKiT1g?autoplay=0&showinfo=0&loop=1&rel=0" frameborder="0" allowfullscreen></iframe>
  <button class="btn">Play</button>
</div>

＆＃13;

＆＃13;

＆＃13;

styles.css的

＆＃13;

＆＃13;

iframe.video {
  width: 100%;
  height: 500px;
}

.ytp-large-play-button svg{
  border-radius: 50% !important;
  height: 50px !important;
  background-color: white !important;
}

＆＃13;

＆＃13;

＆＃13;

youtube.component.ts

＆＃13;

＆＃13;

import { Component } from '@angular/core';

@Component({
  templateUrl: 'youtube.html'
})

export class YoutubeComponent {}

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你想改变播放按钮，那么在脚本和css下面添加你的代码。

＆＃13;

＆＃13;

//youtube script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

onYouTubeIframeAPIReady = function () {
    player = new YT.Player('player', {
        height: '244',
        width: '434',
        videoId: 'AkyQgpqRyBY',  // youtube video id
        playerVars: {
            'autoplay': 0,
            'rel': 0,
            'showinfo': 0
        },
        events: {
            'onStateChange': onPlayerStateChange
        }
    });
}

var p = document.getElementById ("player");
$(p).hide();

var t = document.getElementById ("thumbnail");
t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg";

onPlayerStateChange = function (event) {
    if (event.data == YT.PlayerState.ENDED) {
        $('.start-video').fadeIn('normal');
    }
}

$(document).on('click', '.start-video', function () {
    $(this).hide();
    $("#player").show();
    $("#thumbnail_container").hide();
    player.playVideo();
});

＆＃13;

.start-video {
    position: absolute;
    top: 80px;
    padding: 12px;
    left: 174px;
    opacity: .3;
    
    cursor: pointer;
    
    transition: all 0.3s;
}

.start-video:hover
{
    opacity: 1;
    -webkit-filter: brightness (1);
}

div.thumbnail_container
{
    width: 434px;
    height: 244px;
    overflow: hidden;
    background-color: #000;
}

img.thumbnail
{
    margin-top: -50px;
    opacity: 0.5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="player"></div>
<div id="thumbnail_container" class="thumbnail_container">
    <img class="thumbnail" id="thumbnail" />
</div>
<a class="start-video"><img width="64" src="http://image.flaticon.com/icons/png/512/0/375.png" style="filter: invert(100%); -webkit-filter: invert(100%);"></a>

＆＃13;

＆＃13;

＆＃13;