How to Change the Play Icon of Embedded Youtube Videos

Youtube - custom play icon

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

Hide the player
Get the thumbnail like described here and put it on your page in the same position and size of the player
Put your own play icon over the thumbnail
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 scriptvar 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>

Replace Play Button

Youtube is embedded as an iframe meaning CSS placed on the parent page won't propagate down to it's content. This leaves you with two alternatives:

Clone the iframe content to add your own styling
Embed youtube without using an iframe

Edit

Looking into option 1 I have attempted the following (using PHP to preprocess the iframe content and inject your CSS before serving the page): https://www.tehplayground.com/Hjk19qDWeiwIWkKl

It appears there are a number of security processes in place to prevent you from doing this.

If you are new to CSS and HTML as you say and are using this as a learning exercise this is certainly not a trivial task. I would highly suggest starting with some more basic exercises.

Removing the play on youtube overlay on embedded videos

The three parameters I found useful are:

showinfo=0
controls=0
autohide=1

showinfo=0 makes sure the video does not display the title on the top of the video frame. controls=0 hides the bottom bar with the play button, volume, etc. autohide=1 hides the controls until you hover over them, which is probably the most useful.

All the official docs are here.

Adding a custom play button for Youtube video

I think this is what you exacty needed...!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .playBtn{
        width: 2em;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        vertical-align: middle;
        z-index:1;
    }
    a{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
    }
</style>
<body>
        <a class="youtubevideo" href="https://www.youtube.com/">
            <img class="playBtn" src="https://www.pngitem.com/pimgs/b/255-2554901_recording-icon-png.png" alt="Sample Image">
            <img class="youtubevideo-poster" src="https://picsum.photos/200/300" width="100vw" height="auto">
        </a>
        
</body>

</html>

How to change the video playing in Youtube embedded player?

If you dun like the popup just get rid of it:

function play(id)
    {
       var html  = '';

       html += '<object >';
       html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
       html += '<param name="autoplay" value="1">';
       html += '<param name="wmode" value="transparent"></param>';
       html += '<embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" ></embed>';
       html += '</object>';

       return html;
    };

<div id="button1" />
<div id="playvideo" />

$("#button1").click(function() { $("#playvideo").html(play("YOURVIDEOID")); });

Hope this helps

YouTube embedded video: set different thumbnail

No. Most YouTube videos only have one pre-generated "poster" thumbnail (480x360). They usually have several other lower resolution thumbnails (120x90). So even if there were an embedding parameter to use an alternate poster image (which there isn't), it's result wouldn't be acceptable.

You can theoretically use the Player API to seek the video to whatever location you want, but this would be a major hack for a minor result.