skip to Main Content
Menu

Responsive Youtube embed

img5Ever have a client who wants to have their video from youtube embedded on their website and was the site you were creating for them “responsive“? Well for one, getting embed codes would give you fixed width and height.  These look just right on a computer screen. But if you resized the browser screen or viewed this on a smartphone, the result would just disappoint you. What with all other elements lining up into place and just being plain responsive just doesn’t look right, right? (refer to image on the left.) Simplest hack we encountered was to encase the youtube embed code with a div.  Use Text mode in editing your wordpress page or post and just do as follows: img8     If you are able to edit the style.css of your theme, insert this anywhere. If you are not able to edit, enclose the following css with “<style>” tag and copy this css code onto your page or post. .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; padding-right: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; max-width:560px; height: 100%; max-height:315px; }

Source : https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

 

Responsive Youtube embed Gallery

Alphonse

Editorial Staff at ETN Multimedia is led by Alphonse Tan. Page maintained by Alphonse Tan

Back To Top