How to Embed YouTube Video in Lite Weight Version | WordPress

Lite Embed

You can embed youtube videos in your website using lite embed code, Paste given code in your website’s theme and increase webpage speed.

Go to There for Code – Click Here

Modified Codes

Embed Videos

<div class="youtube-player" data-id="VIDEO_ID" data-src="https://www.youtube.com/embed/VIDEO_ID"></div>

Css Code

.youtube-player {
position: relative;
padding-bottom: 300px;
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin-top: .8em;
margin-bottom: 1.2em
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 300px;
max-height: 300px;
z-index: 100;
background: 0 0
}

.youtube-player img {
object-fit: cover;
display: block;
left: 0;
bottom: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: 250px;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all
}

.youtube-player img:hover {
-webkit-filter: brightness(75%)
}

.youtube-player .play {
background-color: red;
border-radius: 6px;
height: 50px;
width: 80px;
left: 48.5%;
top: 52.5%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
cursor: pointer
}

.play:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -16px;
border-left: 30px solid #fff;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent
}