.wq-embed {
	position: relative;
	max-width: 100%;
	height: 0;
	overflow: hidden;
	background: #dcddde;
	padding-bottom: 56.25%;

	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&-placeholder,
	&-icon {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
	}

	&-placeholder {
		z-index: 1000;
	}

	&-icon {
		$color: #fff;

		z-index: 1010;
		background-color: rgba(255,255,255,0.1);

		&:before {
			content: " ";
			display: block;
			height: 82px;
			width: 82px;
			border: 3px solid $color;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&:after {
			content: " ";
			display: block;
			height: 0;
			width: 0;
			border-top: 15px solid transparent;
			border-bottom: 15px solid transparent;
			border-left: 30px solid $color;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -15px;
			margin-left: -10px;
		}
	}

	&.active {
		.wq-embed-placeholder,
		.wq-embed-icon {
			display: none;
		}

		iframe {
			display: block;
		}
	}
}