JSFiddle - React, Tailwind, and code Playground

by Bohdan Doroshenko

HTML

<body>
	<div class="web-cam">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/gWlto9gy0gc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>
</body>

CSS

.web-cam { 
      width: 300px;
      height: 300px;
      border-radius: 150px;

      position: relative;
      top: 0;
      left: 125px;
      transition: 2s;
      display: flex;
      justify-content: center;
      align-items: center;

      overflow: hidden;
    }

	.web-cam:hover {
    	-webkit-box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 41px 0px rgba(0,0,0,0.75);
		transition: 2s;
    }

    iframe {
      width: 540px;
      height: 540px;
      position: absolute;
}