/**
 * WooCommerce Gallery Videos Frontend CSS
 */

.wc-product-gallery-video {
	width: 100%;
	/* The aspect-ratio is applied via inline style */
}

.wc-product-gallery-video iframe {
	/* Make the iframe fill its wrapper */
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* In case the wrapper is in a flex container (like default Woo gallery) */
	flex-shrink: 0;
}

/* Ensure the wrapper inside the main slider slide behaves */
.woocommerce-product-gallery__image .wc-product-gallery-video {
	/* The default slide (.woocommerce-product-gallery__image) is a flex container.
	This ensures our video wrapper behaves correctly inside it.
	*/
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}