Para dimensionar v\u00eddeos para se adaptar em qualquer dispositivo, seja esse dispositivo um desktop, tablet, dispositivo m\u00f3vel… podemos usar CSS ou Javascript como solu\u00e7\u00e3o para cumprir essa meta. Os exemplos abaixo utilizei apenas solu\u00e7\u00f5es em CSS.<\/p>\n
P\u00e1gina de exemplo<\/a><\/p>\n Abaixo voc\u00ea encontra uma t\u00edpica marca\u00e7\u00e3o HTML para inserir v\u00eddeos do YouTube. Note que foi criada uma div que servir\u00e1 de cont\u00eainer do iframe<\/em>.<\/p>\n Abaixo exemplo de marca\u00e7\u00e3o HTML utilizada para inserir v\u00eddeos do Vimeo. Esse tamb\u00e9m faz uso de iframe<\/em>, logo a t\u00e9cnica \u00e9 a mesma utilizada em v\u00eddeos do YouTube.<\/p>\n CSS para videos do YouTube e Vimeo<\/strong><\/p>\n Voc\u00ea pode querer inserir v\u00eddeos em suas p\u00e1ginas utilizando o elemento CSS<\/strong><\/p>\n A mesma estiliza\u00e7\u00e3o de v\u00eddeos do youTube podem ser usadas para os v\u00eddeos do Vimeo.<\/p>\n Criamos um v\u00eddeo responsivo inserindo um container em volta desse v\u00eddeo. Esse container deve manter as mesmas dimens\u00f5es (propor\u00e7\u00e3o) do v\u00eddeo que na maioria das vezes \u00e9 16:9<\/strong>.<\/p>\n Aqui n\u00e3o podemos usar Resumindo: o padr\u00e3o de c\u00e1lculo da propriedade O valor 56.25%<\/strong> foi retirado da propor\u00e7\u00e3o do v\u00eddeo (largura\/altura igual 19:9). Dividindo 9\/16 e multiplicando por 100 teremos o valor 56.25% que \u00e9 a rela\u00e7\u00e3o da largura do nosso Box.<\/p>\n Recomendo que leiam um artigo que fala exclusivamente sobre c\u00e1lculo de propor\u00e7\u00f5es para v\u00eddeo<\/a>.<\/p>\n Se voc\u00ea utilizada o Foundation Framework<\/a> em seu projeto a classe Se voc\u00ea est\u00e1 a incorpora\u00e7\u00e3o de um v\u00eddeo do YouTube, Vimeo, ou outro site que usa iframe, ou incorporar elementos de objeto , voc\u00ea pode envolver o v\u00eddeo em div.flex -video para criar uma rela\u00e7\u00e3o intr\u00ednseca que vai dimensionar corretamente o seu v\u00eddeo em qualquer dispositivo.<\/p>\n Para deixas o v\u00eddeo responsivo basta envolver a marca\u00e7\u00e3o do v\u00eddeo com o elemento div e nessa div aplicar a classe Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":" Para dimensionar v\u00eddeos para se adaptar em qualquer dispositivo, seja esse dispositivo um desktop, tablet, dispositivo m\u00f3vel… podemos usar CSS ou Javascript como solu\u00e7\u00e3o para cumprir essa meta. Os exemplos abaixo utilizei apenas solu\u00e7\u00f5es em CSS. P\u00e1gina de exemplo V\u00eddeo do YouTube e Vimeo Abaixo voc\u00ea encontra uma t\u00edpica marca\u00e7\u00e3o HTML para inserir v\u00eddeos do […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-3008","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"\nV\u00eddeo do YouTube e Vimeo<\/h2>\n
\r\n<figure>\r\n <div class="boxVideo">\r\n <iframe width="420" height="315" src="http:\/\/www.youtube.com\/embed\/EPkAoxedliA" frameborder="0" allowfullscreen><\/iframe> \r\n <\/div>\r\n<figcaption>Exemplo de v\u00eddeo Responsivo do Youtube<\/figcaption>\r\n<\/figure>\r\n<\/pre>\n
\r\n<figure>\r\n <div class="boxVideo">\r\n <iframe src="http:\/\/player.vimeo.com\/video\/10230706" width="500" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe> <p><a href="http:\/\/vimeo.com\/10230706">Smarty aula 1<\/a> from <a href="http:\/\/vimeo.com\/user3121269">kadunew.com\/blog<\/a> on <a href="https:\/\/vimeo.com">Vimeo<\/a>.<\/p>\r\n <\/div>\r\n<figcaption>Exemplo de v\u00eddeo Responsivo do Vimeo<\/figcaption>\r\n<\/figure>\r\n<\/pre>\n
\r\nfigure { width: 90%; min-width: 17.5em; margin:0 auto;}\r\nfigcaption { font: 120% sans-serif; text-align: center;}\r\n.boxVideo {\r\n\tposition: relative;\r\n\tpadding-bottom: 56.25%; \r\n\tpadding-top: 25px;\r\n\theight: 0;\r\n\tmargin:0 auto;\r\n}\r\n.boxVideo iframe {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}\r\n<\/pre>\nElemento HTML5 video<\/h2>\n
video<\/code> da HTML5. Abaixo exemplo de como deixar seus v\u00eddeos HTML5 responsivos. <\/p>\n\r\n<figure>\r\n <video poster="videos\/cover.jpg" controls>\r\n\t\t<source src="http:\/\/www.w3schools.com\/html\/mov_bbb.ogg" type="video\/ogg" \/>\r\n\t\t<source src="http:\/\/www.w3schools.com\/html\/mov_bbb.mp4" type="video\/mp4" \/>\r\n\t\t<source src="http:\/\/www.w3schools.com\/html\/mov_bbb.webm" type="video\/webm" \/>\r\n\t\t<p>Seu navegador n\u00e3o suporta o elemento video HTML5.<br \/> \r\n\t\tAssista o video localmente <br \/> <a href="PlymouthRoadrunnerCommercial.mp4">fazendo o download<\/a><\/p>\r\n\t<\/video>\r\n<figcaption>Video responsivo com HTML5 video<\/figcaption>\r\n<\/figure>\r\n<\/pre>\n
\r\nfigure { width: 90%; min-width: 320px; margin:0 auto;}\r\nfigcaption { font: 120% sans-serif; text-align: center;}\r\nvideo {\r\n\twidth: 100%;\r\n\theight: auto;\r\n}\r\n<\/pre>\nExplicando as regras acima<\/h2>\n
.boxVideo<\/code> defini um tamanho m\u00ednimo para o elemento figure<\/code>, ou seja, o redimensionamento do v\u00eddeo vai ocorrer at\u00e9 320px, abaixo disso o v\u00eddeo n\u00e3o se ajusta mais ao tamanho da tela.
\nposition: relative<\/code> todos os elementos filhos v\u00e3o se posicionar em rela\u00e7\u00e3o a esse recipiente.
\npadding-bottom: 56.25%<\/code> foi utilizada para criar uma propor\u00e7\u00e3o dentro do elemento figure<\/code> preenchendo a altura com esse valor.<\/p>\npadding-top: 25px<\/code> abre espa\u00e7o para os controladores de v\u00eddeo.<\/p>\nheight: 0<\/code> para retirar qualquer altura do elemento.<\/p>\nmargin:0 auto <\/code> para centralizar.<\/p>\nwidth: 90%<\/code> para definir a propor\u00e7\u00e3o ocupada pelo cont\u00eainer na tela.<\/p>\n.boxVideo iframe<\/code> recebe praticamente regras de posicionamento e dizemos que vai ocupar cem por cento da largura e altura do seu elemento pai.<\/p>\nheight <\/code>com porcentagem, pois ela \u00e9 calculada em rela\u00e7\u00e3o ao seu elemento pai mais pr\u00f3ximo que tenha uma altura definida. Sendo assim foi usada a propriedade padding-bottom<\/code> em porcentagem que \u00e9 calculada em rela\u00e7\u00e3o a largura do pr\u00f3prio Box<\/strong>.<\/p>\npadding-top<\/code> e padding-bottom<\/code> (quando declaradas em porcentagens) \u00e9 a largura do box do qual foram definidos.<\/p>\nV\u00eddeos no Foundation<\/h2>\n
.flex-video<\/code> permite deiaxr seus v\u00eddeos responsivos no Foundation. Os videos podem ser do YouTube, V\u00edmeo, ou de qualquer site que utilize iframe<\/em>, embed<\/em> ou object<\/em> para incorporar os v\u00eddeos.<\/p>\n.flex-video<\/code>. Veja o exemplo abaixo:<\/p>\n\r\n<div class="flex-video">\r\n <iframe width="420" height="315"\r\n src="\/\/www.youtube.com\/embed\/aiBt44rrslw" frameborder="0" allowfullscreen><\/iframe>\r\n<\/div>\r\n<\/pre>\n