girlrock | youtube embedding trick

i never posted any code for this because it felt kind of dumb since iframes are truly the bane of my existence, but here's my very hacky method for embedding youtube videos without the "Watch on YouTube" link that gets generated underneath.

i've provided code that you can simply copy-paste, but in brief my workaround involves creating a wrapper div with a 16/9 aspect ratio and then setting overflow to hidden so that it cuts off additional text. just add your video id and change max-width to control your embed size (if the max-width is smaller than the iframe settings it'll override it so you can leave as-is, otherwise up the dimensions), and as per usual feel free to apply border-radius to make rounded corners or any other styling preferences 👍

plain

Watch on YouTube


<div style="max-width: 350px; aspect-ratio: 16 / 9; margin: 0px; overflow: hidden;"><iframe width="560" height="315" src="https://www.youtube.com/embed/[VIDEO_ID]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

example centered with rounded corners and border

Watch on YouTube



<div style="max-width: 350px; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; box-shadow: rgb(255, 255, 255) 0px 0px 0px 5px, rgba(0, 0, 0, 0.2) 0px 0px 0px 6px; margin: 0 auto;"> <iframe width="560" height="315" style="border-radius: 4px;" src="https://www.youtube.com/embed/[VIDEO_ID]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div>

apologies because i feel like this is kind of dumb but ummm yes. i tried a lot of different things that have never worked so this is what i've been using! hope it helps 🙇‍♀️