Last active
February 2, 2017 22:26
-
-
Save mattborn/2896c5ac00bef5667f8ac83322eda968 to your computer and use it in GitHub Desktop.
iFrame Play Button
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>iframe Play Button</title> | |
| <style> | |
| @import "https://cdn.rawgit.com/mattborn/a9ceb96ad80f586cf40145276f98b86c/raw/713948588a471f22349744ff76d899fedbdb1577/bambu.css"; | |
| iframe { | |
| border: none; | |
| max-width: 100%; | |
| } | |
| .video { | |
| height: 0; | |
| padding: 0 0 56.25%; /* 16:9 */ | |
| position: relative; | |
| } | |
| .video-iframe, | |
| .video-play { | |
| height: 100%; | |
| left: 0; | |
| position: absolute; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .video-play { | |
| align-items: center; | |
| color: white; | |
| cursor: pointer; | |
| font-size: 100px; | |
| display: flex; | |
| justify-content: center; | |
| pointer-events: none; | |
| } | |
| .video:hover .video-play { color: #11a7aa; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="video"> | |
| <iframe class="video-iframe" src="https://www.facebook.com/video/embed?video_id=10154064015005318"></iframe> | |
| <div class="video-play"> | |
| <i class="video-play-icon fa fa-youtube-play"></i> | |
| </div> | |
| </div> | |
| <script> | |
| focus(); | |
| document.querySelectorAll('.video').forEach(function (el) { | |
| const listener = addEventListener('blur', function () { | |
| const play = el.querySelector('.video-play'); | |
| if (play && document.activeElement === el.querySelector('.video-iframe')) { | |
| el.removeChild(play); | |
| } | |
| removeEventListener('blur', listener); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello
Happy to meet you, my name is Miss Jessica Lawson, it is my pressure to meet you here today through this site, i will like you to write to me so that i can be able to tell you more about me and the reason of my contact with you. here is my private email address, please write to me here so that i can tell you more anout me and also to send my picture to you ( [email protected] ) thanks
Yours Miss Jessica Lawson