Youtube

Youtube Play Button Overlay Maker, Add Play Button To Image

Update: It’s been a while since this was posted, and techniques have changed! The original method still works fine. But if you want to skip the background image and use an icon font instead, check out this version that uses Font Awesome to create a CSS play button. I’ve also created an SVG play button version for an additional approach. Or just keep reading for techniques 2 & 3 below. 

A project I’m working on now involves redesigning an existing site, and converting it to a responsive design using the Bootstrap framework. One part of the home page has a list of video thumbnail images. We wanted to overlay a play button icon on the image to give an indication of what will happen when a user clicks on a thumbnail. This is pretty simple when you have a fixed size image, but it gets a little trickier with responsive images. The trick to making it work was adding a float to the containing element.

Đang xem: Youtube play button overlay

This post originally appeared on lisbdnet.com. If you are reading it on another website, please view the original article.

Technique 1 (original method)

Use an absolutely positioned span element with a background image of the play button. The background image needs to have some transparency as it will appear over your video thumbnail. Change the background size property to adjust the size of the play button at various mobile and desktop breakpoints.

*

.videos img { width:100%; height:auto;}a.video { float: left; position: relative;}a.video span { width: 100%; height: 100%; position: absolute; background: url(“../path-to-your-image/play-btn.png”) no-repeat; background-position: 50% 50%; background-size: 300%;}
media screen and (max-width: 480px) { a.video span { background-size: 400%; }}Here’s a demo with source code: responsive video play button demo.

See also  Youtube Recommended Videos Gone ?: Youtube Navigating Youtube Video Recommendations

Xem thêm:

Technique 2 (icon font)

Use Font Awesome (or another icon font set) to display a play button over your video thumbnail. This has the advantage of being resolution-independent. The play button icon will be crisp and sharp regardless of the device resolution. As with the original method, the play button holder will be absolutely positioned. Use the ::after or ::before pseudo-element selectors to display the play button icon.

*

/* Just a parent container for the videos */.videos { margin: 20px auto; max-width: 700px;}/* Individual video container */.video-wrap { position: relative; max-width: 700px; width: 100%; margin-bottom: 10px;}.video-wrap .placeholder { max-width: 700px; width: 100%;}.video-wrap .play-btn { position: absolute; max-width: 700px; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 1; /* needed if using Bootstrap */ text-align: center; color: #eaeaea; background-color: rgba(255,255,255,.4); border-radius: 50px; transition: color, background-color .2s ease;}.video-wrap .play-btn:hover,.video-wrap .play-btn:focus { color: #000; background-color: rgba(255,255,255,.8); cursor: pointer;}.play-btn::after { /* Font Awesome recommends these styles https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements */ display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; /* Define the font family, weight, and icon */ font-family: “Font Awesome 5 Free”; font-weight: 900; font-size: 60px; content: “f04b”; /* positioning tweaks */ padding-top: 20px; padding-left: 10px;}Here’s a demo of the icon font method: CSS icon font play button demo.

Technique 3 (SVG play button)

Perhaps an easier way of adding a play button icon is to use an SVG play button. You don’t have to load a third-party font library which will reduce your load time. With SVG, you have freedom to create whatever graphic you want, and you can easily change the color with the ‘fill’ property. For this demo, we are using the same absolute positioning technique. The CSS code follows, as well as a link to the demo where you can grab the SVG code.

See also  How To Watch Multiple Youtube Videos At Once, How To Play Two Youtube Videos At The Same Time

Xem thêm: Best Dragon Ball Moments From Dragon Ball Z, Top 15 Best Dbz Scenes That Were Amazing

/* Just a parent container for the videos */ .videos { margin: 20px auto; max-width: 700px; } /* Individual video container */ .video-wrap { position: relative; max-width: 700px; width: 100%; margin-bottom: 10px; } /* video poster frame or placeholder image */ .video-wrap .placeholder { max-width: 700px; width: 100%; } /* SVG play button container */ .video-wrap .play-btn { position: absolute; max-width: 700px; width: 100px; height: 100px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .video-wrap .play-btn svg { transition: all .2s ease; fill: #fff; } .video-wrap .play-btn:hover svg, .video-wrap .play-btn:focus svg { cursor: pointer; fill: #17e617; } /* adjust your icon size, add different breakpoints as needed */
media screen and (max-width: 600px) { .video-wrap .play-btn { width: 70px; height: 70px; } }Here’s a demo of the SVG play button method: SVG play button demo.

See more articles in category: Youtube

Leave a Reply

Back to top button