%% - [[HTML]] - [[CSS]] %% YouTube's standard embed code (retrieved by clicking Share > Embed) is not [[Responsive design|responsive]], which means it may cause overflow and other issues when viewed from smaller screens, such as mobiles. To fix this, use the following code: [^hugo] ```html <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe src="https://www.youtube.com/embed/cCFwqlcHkX8" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="The last video I published"></iframe> </div> ``` This embeds a YouTube video that will resize to fit screens of any size. ## References [^hugo]: _Shortcodes | Hugo_. Retrieved in June 2021 from [GoHugo documentation](https://gohugo.io/content-management/shortcodes/#example-youtube-output)