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;
}

You can support my work by buying the tools I use through my affiliate links:

Exclusive 25% Off These Two Lifetime Deals:

MainWP.   Discount code "digitalfreedoms"
WP Code Box.  Discount  code "beaverjunction"

--------------------------------------------------------------

WP Rocket | ShortPixel | Beaver Builder |

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