How to embed a responsive or fluid YouTube video
Describes how to make YouTube videos responsive, scalable and fluid when embeding in HTML.
FULL HTML CODE
----------------------
!DOCTYPE html
html lang=_en_
head
meta charset=_UTF-8_
title_Responsive | Fluid YouTube__title
style type=_text_css_
html {
font-family:Helvetica;
}
body {
margin:0 auto;
padding:0;
width:85%;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
_style
_head
body
div class=_video-container_
iframe style=_border:0; width=_560_ height=_315_ src=_https:__www.youtube-nocookie.com_embed_HAfFfqiYLp0?rel=0;vq=hd1080_ allowfullscreen___iframe_
_div
_body
_html