How to Make Youtube Custom Thumbnails in Posts - NETRAL'ID
How to Make Youtube Custom Thumbnails in Posts

How to Create Youtube Custom Thumbnails in Posts - This time I will share simple tips on how to create custom youtube video thumbnails using CSS, jQuery, and HTML.

First log in to Blogger> Open Template> Edit HTML

Copy and apply the code below before </style>


.youtubeBorder{
background:none repeat scroll 0 0 #fff;
border:1px solid #e0e0e0;
border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);
margin:10px 0 20px;
padding:4px
}
.youtubeBorder p.post-video{
margin:0!important
}
.youtube{
background-color:#000;
max-width:100%;
overflow:hidden;
position:relative;
cursor:hand;
cursor:pointer;
height:330px;
width:100%
}
.youtube .thumb{
bottom:0;
display:block;
left:0;
margin:auto;
max-width:100%;
position:absolute;
right:0;
top:0;
width:100%;
height:auto;
opacity:.8;
}
.youtube .play{
opacity:.9;
height:77px;
left:50%;
margin-left:-38px;
margin-top:-38px;
position:absolute;
top:50%;
width:77px;
background:url(http://1.bp.blogspot.com/-UxHkp1GZmYI/VEpXsS2YAeI/AAAAAAAAHH0/kgw4wjcrOvw/s1600/play.png) no-repeat}
.play:hover {
opacity:1;
}


Then copy and apply the code below before </body>


<script>
$(document).ready(function(){
$("#play").click(function(){
$("#remove").hide();
$("#add").show();
});
});
</script>


Save the template.
How to apply in posts

Create a post> Apply the caller code below in the HTML Tab posting


<div class='youtube' data-id='mbPO4FPAX1Y'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=mbPO4FPAX1Y"><img class='thumb' src="http://i.ytimg.com/vi/mbPO4FPAX1Y/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>


Change all of this youtube video code mbPO4FPAX1Y with the video code you want.

For example youtube video links like this

https://www.youtube.com/watch?v=mbPO4FPAX1Y
Copy the code marked in the HTML code above.

If you want to bring up autoplay on the video, please add autoplay = 1 behind the youtube link

https://www.youtube.com/watch?v=mbPO4FPAX1Y? autoplay = 1


With this trick even images from the youtube video link will appear on the main page of your blog.


Note: For those of you who use the Lycoris 2 template, just apply the HTML code to the post, because for the other code I've applied.

May be useful.



How to Make Youtube Custom Thumbnails in Posts

How to Make Youtube Custom Thumbnails in Posts

How to Create Youtube Custom Thumbnails in Posts - This time I will share simple tips on how to create custom youtube video thumbnails using CSS, jQuery, and HTML.

First log in to Blogger> Open Template> Edit HTML

Copy and apply the code below before </style>


.youtubeBorder{
background:none repeat scroll 0 0 #fff;
border:1px solid #e0e0e0;
border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.2);
margin:10px 0 20px;
padding:4px
}
.youtubeBorder p.post-video{
margin:0!important
}
.youtube{
background-color:#000;
max-width:100%;
overflow:hidden;
position:relative;
cursor:hand;
cursor:pointer;
height:330px;
width:100%
}
.youtube .thumb{
bottom:0;
display:block;
left:0;
margin:auto;
max-width:100%;
position:absolute;
right:0;
top:0;
width:100%;
height:auto;
opacity:.8;
}
.youtube .play{
opacity:.9;
height:77px;
left:50%;
margin-left:-38px;
margin-top:-38px;
position:absolute;
top:50%;
width:77px;
background:url(http://1.bp.blogspot.com/-UxHkp1GZmYI/VEpXsS2YAeI/AAAAAAAAHH0/kgw4wjcrOvw/s1600/play.png) no-repeat}
.play:hover {
opacity:1;
}


Then copy and apply the code below before </body>


<script>
$(document).ready(function(){
$("#play").click(function(){
$("#remove").hide();
$("#add").show();
});
});
</script>


Save the template.
How to apply in posts

Create a post> Apply the caller code below in the HTML Tab posting


<div class='youtube' data-id='mbPO4FPAX1Y'><iframe id="add" style="display:none" width="100%" height="330" src="//www.youtube.com/embed/mbPO4FPAX1Y?rel=0" frameborder="0" allowfullscreen></iframe><div id="remove"><a href="https://www.youtube.com/watch?v=mbPO4FPAX1Y"><img class='thumb' src="http://i.ytimg.com/vi/mbPO4FPAX1Y/hqdefault.jpg"/></a><div class='play' id="play"></div></div></div>


Change all of this youtube video code mbPO4FPAX1Y with the video code you want.

For example youtube video links like this

https://www.youtube.com/watch?v=mbPO4FPAX1Y
Copy the code marked in the HTML code above.

If you want to bring up autoplay on the video, please add autoplay = 1 behind the youtube link

https://www.youtube.com/watch?v=mbPO4FPAX1Y? autoplay = 1


With this trick even images from the youtube video link will appear on the main page of your blog.


Note: For those of you who use the Lycoris 2 template, just apply the HTML code to the post, because for the other code I've applied.

May be useful.



Load Comments

Subscribe Our Newsletter

Notifications

Disqus Logo