Tutorial & code

Typography Fun

This is a collection of... still need to sort out a format for this.

Minimum BB plugin required:      Saved under:  
Skill level:     Contributor: 

Template Location

Bj Custom Layout Nav

Video

Notes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See the Typography Fun template in action.

Code

CSS

.youtube-player
{
position: relative;
padding-bottom: 56.23%;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}
.youtube-player IFRAME
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player IMG
{
bottom: 0;
display: flex;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: 0.4s all;
}
.youtube-player IMG:hover
{
-webkit-filter: brightness(75%);
}
.youtube-player .play
{
position: absolute;
cursor: pointer;
z-index: 1;
left: 50%;
top: 50%;
margin-left: -20px;
margin-top: -34px;
}
.youtube-player .play:after
{
content: “▶”;
font-size: 25px;
color: #fff;
background-color:rgba(0,0,0,0.4);
padding: 8px 22px;
border-radius: 12px;
}

.youtube-player .play:hover:after
{
background-color: red;
}

Can you improve this template?

We'd love it if you can so please comment and share.

For help please post to the Beaver Builder Beginners Facebook group or the YouTube video with this post.

Leave a Comment