Add your youtube video on blog with CSS stylish Laptop frame

Hello, Reader's
How are you all? Hope to all are well.
Here are any YouTubian? If anybody is here this post is must of need for you.

YouTube is most popular video sharing site. We can embedded  any YouTube video on our website/blog with default Frame. But the frame is not attractive and also like unresponsive. Today I will Educate a new system for embedded your video and post your blog/website with attractive "Laptop Frame".

Now lets start the tutorial. Before start work, please take a backup of your template for safety.

At first login your blogger blog. Then follow bellow step.

Step 1: Go To Dashboard > Template > Edit HTML and past bellow code before ]]></b:skin>

 .tb_outer_wrap{width:100%;max-width:650px;margin:15px auto}.tb_video_wrap_macbook{position:relative;padding-bottom:43%;padding-top:0;height:0;overflow:hidden;-webkit-border-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIk3JFjmIxmkp3X6NW7FBj5AGeQecfxyyvNw8oxm7ixdbA23kQIgJ2dDAiTyWw7iixJ09nEoSVJum29s7FQxAXE0DcMcl7KGip0-cvrprb2_zDsKiFyS5RaZLabZ5GEjJYb4Rcp6d5eby/s1600/macbook+laptop+frame-esobondhu.png) 50 233 112 228 stretch stretch;-moz-border-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIk3JFjmIxmkp3X6NW7FBj5AGeQecfxyyvNw8oxm7ixdbA23kQIgJ2dDAiTyWw7iixJ09nEoSVJum29s7FQxAXE0DcMcl7KGip0-cvrprb2_zDsKiFyS5RaZLabZ5GEjJYb4Rcp6d5eby/s1600/macbook+laptop+frame-esobondhu.png) 50 233 112 228 stretch stretch;-o-border-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIk3JFjmIxmkp3X6NW7FBj5AGeQecfxyyvNw8oxm7ixdbA23kQIgJ2dDAiTyWw7iixJ09nEoSVJum29s7FQxAXE0DcMcl7KGip0-cvrprb2_zDsKiFyS5RaZLabZ5GEjJYb4Rcp6d5eby/s1600/macbook+laptop+frame-esobondhu.png) 50 233 112 228 stretch stretch;border-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIIk3JFjmIxmkp3X6NW7FBj5AGeQecfxyyvNw8oxm7ixdbA23kQIgJ2dDAiTyWw7iixJ09nEoSVJum29s7FQxAXE0DcMcl7KGip0-cvrprb2_zDsKiFyS5RaZLabZ5GEjJYb4Rcp6d5eby/s1600/macbook+laptop+frame-esobondhu.png) 50 233 112 228 stretch stretch;border-color:transparent;border-width:27px 76px 55px;border-style:inset}.tb_video_wrap_macbook embed,.tb_video_wrap_macbook iframe,.tb_video_wrap_macbook object{position:absolute;top:0;width:100%;height:100%;background-color:#ddd}@media (max-width:500px){.tb_video_wrap_macbook{border-width:20px 62px 40px}@media all and (max-width:400px){.tb_video_wrap_macbook{border:none!important}}} 

Step 2: Then when you create a new post, use the code below caller on the post HTML Tab.

 <div class="tb_outer_wrap">
 <div class="tb_video_wrap_macbook">
<iframe width="560" height="315" src="https://www.youtube.com/embed/4QnFq4FVB0?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe> </div> </div> 

Step 3: Customize your YouTube links like as following highlight link. Replace your link 4QnFq4FVB0 

https://www.youtube.com/embed/4QnFq4FVB0s

Note: If you find any problems please contact with us in our contact page. Don't forget to share and comment this post. Keep Enjoy.

Demo Click here

Author: Blogger King

Related Posts