Hello Developers, Today I am going to show you how to put css in iframe video player.

Sometimes we need to css in iframe video player but css not working. Here is a solution for it.

Here I have put video in iframe. you can see the black background  is full width but not the  video.

I have changed my code. Please check below solution.

HTML

<div class="container-fluid slider">
    <div class="slider-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/owsfdh4gxyc" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

CSS

.slider .slider-container {
	position: relative;
	padding-bottom: 53%;
	overflow: hidden;
}
.slider .slider-container iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Output

Hopefully this article is useful or you.

Thank You 🙂