Youtube - 自定义播放图标 [英] Youtube - custom play icon

问题描述

我想问一下，是否可以更改 Youtube 嵌入的视频播放图标?我找到了这个帖子:我可以更改嵌入的 YouTube 视频的播放图标吗?但是这个按钮在原始播放图标的顶部，所以如果我使用透明的东西，原始播放图标将可见.

感谢您的帮助.

解决方案

我认为你不能改变真正的按钮，但你可以解决它:

1. 隐藏玩家
2. 获取描述的缩略图在这里并将其放在您的页面上与播放器相同的位置和大小
3. 将您自己的播放图标放在缩略图上
4. 点击播放图标后，隐藏缩略图和播放图标，显示播放器并使用链接中的 YouTube API 启动视频

小提琴

//youtube 脚本var tag = document.createElement('script');tag.src = "//www.youtube.com/iframe_api";var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);var 播放器；onYouTubeIframeAPIReady = 函数 () {player = new YT.Player('玩家', {高度:'244'，宽度:'434'，videoId: 'AkyQgpqRyBY',//youtube 视频 ID玩家变量:{'自动播放':0，'rel': 0,'显示信息':0},事件:{'onStateChange': onPlayerStateChange}});}var p = document.getElementById ("玩家");$(p).隐藏();var t = document.getElementById ("缩略图");t.src = "http://img.youtube.com/vi/AkyQgpqRyBY/0.jpg";onPlayerStateChange = 函数(事件){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();});

.start-video {位置:绝对；顶部:80px；填充:12px；左:174px；不透明度:.3；光标:指针；过渡:全0.3s；}.开始视频:悬停{不透明度:1；-webkit-filter: 亮度 (1);}div.thumbnail_container{宽度:434px；高度:244px；溢出:隐藏；背景色:#000；}img.thumbnail{边距顶部:-50px；不透明度:0.5；}

<div id="player"></div><div id="thumbnail_container" class="thumbnail_container"><img class="thumbnail" id="thumbnail"/>

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

I wanted to ask, if can i change Youtube embbeded video play icon ? I found this post: Can I change the play icon of embedded youtube videos? But this button is on top of orginal play icon, so if i use something transparent, orginal play icon will be visible.

Thank you for help.

解决方案

I don't think you can change the real button, but you could work around it:

1. Hide the player
2. Get the thumbnail like described here and put it on your page in the same position and size of the player
3. Put your own play icon over the thumbnail
4. When your play icon gets clicked, hide the thumbnail and your play icon, show the player and use the YouTube API like in your link to start the video

Fiddle

//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();
});

.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;
}

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

这篇关于Youtube - 自定义播放图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！