Add AutoPlay Muted Video on Html Page

Some time we need to add muted YouTube video on html page in 100% width. Here we will fix this issue by loading YouTube video in <iframe> and Css.

Css Code

.video_container .hero-video{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video_container .hero-video #myvideo{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Html Code

<div class="video_container">
	<div class="hero-video">

<iframe id="myvideo" type="text/html" src="https://www.youtube.com/embed/K4TOrB7at0Y?enablejsapi=1&amp;autoplay=1&amp;controls=0&amp;fs=1&amp;loop=1&amp;playlist=K4TOrB7at0Y&amp;rel=0&amp;mute=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

	</div>
</div>

Thanks.