Created
October 15, 2021 15:57
-
-
Save martinDolan/93105e1b8948878fa7b52452e757ec0e to your computer and use it in GitHub Desktop.
Media examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment