Skip to content

Instantly share code, notes, and snippets.

@wainori2199

wainori2199/YouTubeCSS

Created April 22, 2018 10:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wainori2199/2c1dabd98539b4150119f6c40aa251ea to your computer and use it in GitHub Desktop.
Save wainori2199/2c1dabd98539b4150119f6c40aa251ea to your computer and use it in GitHub Desktop.
Download ZIP
YouTubeCSS
Raw
YouTubeCSS
.youtube {
display: inline-block;
position: relative;
overflow: hidden;
width: 320px;
height: 180px;
}
.youtube::before {
position: absolute;
content: "Click to Play";
color: #fff;
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 180px;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
transition: all 0.3s;
}
.youtube:hover::before {
background: rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: all 0.3s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment