Media examples

gistfile1.txt

		<div class="grid grid-cols-12 gap-1">

			<div class="col-span-12">
				<div class="pt-64 pb-32">
					<p class="mb-1 font-bold">Image Example (defaults to object-fit: cover) </p>
					<p>No padding on parent container</p>
				</div>
			</div>
			<div class="col-span-4 outline-black flex items-center bg-red-100">
				<div class="aspect-ratio-box">
					<img class="aspect-media" src="https://via.placeholder.com/560x315">
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center bg-red-100">
				<div class="aspect-ratio-box aspect-ratio-75">
					<img class="aspect-media" src="https://via.placeholder.com/560x315">
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center bg-red-100">
				<div class="aspect-ratio-box aspect-ratio-100">
					<img class="aspect-media" src="https://via.placeholder.com/560x315">
				</div>
			</div>

			<div class="col-span-12">
				<div class="pt-64 pb-32">
					<p class="mb-1 font-bold">Image Example (using .contain class) </p>
					<p>20px padding on parent container</p>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center p-20 bg-red-100">
				<div class="aspect-ratio-box">
					<img class="aspect-media contain" src="https://via.placeholder.com/560x315">
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center p-20 bg-red-100">
				<div class="aspect-ratio-box aspect-ratio-75">
					<img class="aspect-media contain" src="https://via.placeholder.com/560x315">
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center p-20 bg-red-100">
				<div class="aspect-ratio-box aspect-ratio-100">
					<img class="aspect-media contain" src="https://via.placeholder.com/560x315">
				</div>
			</div>

			<div class="col-span-12">
				<div class="pt-64 pb-32">
					<p class="mb-1 font-bold">YouTube Example (using .contain class) </p>
					<p>20px padding on parent container</p>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center p-20 bg-yellow-100">
				<div class="aspect-ratio-box">
					<iframe class="aspect-media contain" src="https://www.youtube.com/embed/C0mDENSW3VQ"
						title="YouTube video player" frameborder="0"
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
						allowfullscreen></iframe>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center p-20 bg-yellow-100">
				<div class="aspect-ratio-box aspect-ratio-75">
					<iframe class="aspect-media contain" src="https://www.youtube.com/embed/C0mDENSW3VQ"
						title="YouTube video player" frameborder="0"
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
						allowfullscreen></iframe>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center p-20 bg-yellow-100">
				<div class="aspect-ratio-box aspect-ratio-100">
					<iframe class="aspect-media contain" src="https://www.youtube.com/embed/C0mDENSW3VQ"
						title="YouTube video player" frameborder="0"
						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
						allowfullscreen></iframe>
				</div>
			</div>

			<div class="col-span-12">
				<div class="pt-64 pb-32">
					<p class="mb-1 font-bold">Spotify Example</p>
					<p>No padding on parent container</p>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center bg-green-100">
				<div class="aspect-ratio-box">
					<iframe class="aspect-media" src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
						frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center bg-green-100">
				<div class="aspect-ratio-box  aspect-ratio-75">
					<iframe class="aspect-media" src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
						frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
				</div>
			</div>

			<div class="col-span-4 outline-black flex items-center bg-green-100">
				<div class="aspect-ratio-box  aspect-ratio-100">
					<iframe class="aspect-media" src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
						frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
				</div>
			</div>


		</div>