Skip to content

Instantly share code, notes, and snippets.

@kevinweber
Last active August 29, 2015 14:06
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 kevinweber/c5d2b56ea8e5afda287b to your computer and use it in GitHub Desktop.
Save kevinweber/c5d2b56ea8e5afda287b to your computer and use it in GitHub Desktop.
This CSS can be used to style lazy loaded Youtube videos without WordPress. See instructions: https://wordpress.org/support/topic/plugin-not-activating-how-to-use-plugin-with-youtube-placed-directly-in-theme?replies=4#post-6041175
a.lazy-load-youtube {
vertical-align: top;
background: #555;
width: 100%;
max-width: 480px;
height: 270px;
background-size: cover;
text-decoration: none;
color: #ddd;
display: inline-block;
}
a.lazy-load-youtube:hover {
text-decoration:none;
color: #fff;
}
.lazy-load-youtube-info {
color: #2c2c29;
padding: 20px 0;
font-size: 21px;
}
.lazy-load-youtube-div {
border: 3px solid #2c2c29;
background: url(images/play-youtube.png) center center no-repeat;
position: absolute;
opacity: 0.8;
}
.lazy-load-youtube-div:hover {
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment