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.
Related Topics
Css: Display: Grid And/Or -Ms-Grid
Is Is Possible to Scale Inline Svg with CSS
How to Specify a CSS Shorthand for "All Elements Except the First/Last"
CSS White Space at Bottom of Page Despite Having Both Min-Height and Height Tag
CSS (Transition) After a Pseudo Element - How to Transition Content That Shows on Hover
How to Centre Absolutely Positioned Content of Unknown Width
How to Place an Image Over Another
Bootstrap 3 Navbar Active Li Not Changing Background-Color
Twitter Bootstrap Responsive Carousel with Multiple Items
How to Add/Insert a Before or After Pseudo Element into Chrome's Inspector
Position a Div Container on the Right Side
Keep Div at the Bottom of Another Div - CSS
Bootstrap 4 - How to Make 100% Width Search Input in Navbar
How to Make Double Lines Border in CSS, Each Line in Different Color, Without Using Background Image
How to Convert Table Based Layout with Bootstrap "Row" and "Col-*-*"