Detect iframe click events with pointer-events

Today I learned about the CSS attribute pointer-events. Used with an iframe and parent div you can detect when a click has been made over an embedded iframe. <div class="container"> <iframe></iframe> </div> iframe { pointer-events: none; } $(document)...

Create a play button overlay with a pseudo-element

Today I learned how to create a play button overlay on a video thumbnail. .placeholder-video { position: relative; width: 854px; height: 480px; } .placeholder-video img { width: 854px; height: 480px; padding: 0px; } .placeholder-video:before { content: ''; position: absolute; display: block; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center; background-image: url("/images/play_button_overlay.jpg"); opacity: .50; } .placeholder-video:hover:before { opacity: .55; }