Embedding

I wanted to embed videos on my site. They can convey a large array of points in a very engaging and professional manor and also allow for a lot of information to be stored/delivered in a relatively small amount of real-estate. I wanted to ensure that the videos I included did justice to my site and were not the inane ramblings of someone in their bedroom. I wanted them to be high definition, well shot and professional. This would make the user feel as though they are exploring the Pacific and not just merely being told about it. I weighed up where to pull the videos from and how best to display them.

I considered ripping them off YouTube and other such sites and then displaying through my file structure and actually storing them server site in my source folder. This however, would be very heavy on the bandwidth, slow and un-effective. I then looked into embedding the videos from a site. This takes a lot of the bandwidth strain away as the user is effectively connecting to the site the video is held on through my site. 

So that was the display method sorted I now had to choose a website. There are a lot of different video streaming sites on the web. Each with connoted feelings and quality. I looked briefly at sites like Dailymotion and YouTube but I felt that they weren't quite up to scratch. Dailymotion is pretty obscure and I am not familiar with it; the design of it is also a little off for my site. YouTube on the other hand is a great resource for all different types of video however, often the quality just isn't there and the player is quite distinctive and would clash majorly with my colour scheme and design. And pretty quickly I decided upon Vimeo.

Source: http://www.vimeo.com

This is an old splash/login screen for vimeo but I think that it really represents the company well. It is very, very aesthetically pleasing and well designed. It is polished and clean and very professional whilst not being too uptight and snobby. The main attraction however, is the quality of the videos there are on the site. YouTube is catching up nowadays but vimeo has always been the place to go for amateur film makers and people with a bit of a budget. The quality of video on the site is almost always high quality HD (720p and above) and the codec the site uses is just a little crisper that YouTube currently. I believe that they both use H.264 but vimeo doesn't cap the quality whereas I think that YouTube cap the quality to ease bandwidth slightly unless for a special user. This makes vimeo a great choice for embedding. The player graphics are all very sleek and pure which works well with my site too!

They also make it very easy to embed video too. You simply click the share button within the video player (it's highlighted in bright blue):

Source: http://vimeo.com/9819479

This brings up a little pop up window which supplies you with a whole array of sharing options:

The highlighted text is copy and pasted into the HTML for the webpage. And within the same window you can also specify a vast number of parameters for the player to really customise it to your site:

This again makes it perfect for my site as I can make it look even cleaner than it already does by removing the image of the author and the title/byline. This is the perfect video streaming site for me. I wanted to also go one step further to really sell the embed and make it look built in and clean and also make it responsive. The responsiveness was a challenge because the iframe doesn't handle resizing well at all. I looked around for while and eventually pieced together a method from a few sources. I started by putting the iframe within a div element and removing the height and width values from the HTML embed code I copied from vimeo:

Once that was done I then wrote this into the CSS:

The first few lines basically makes the div around the iframe have zero height but open with padding from the bottom. After that I simply hid the overflow and added a margin to either side (to centre it) and to the bottom (to create some room for other elements below). Having a percentage for the padding makes the size responsive to it's surroundings whilst retaining the aspect ratio (one of the biggest problems the iframe has with resizing). The last two lines are just stylising to make the iframe look nice and blend in. Below I am applying rules to the actual iframe itself within it's containing div. I am making it so it is absolutely positioned, stuck completely into the top left hand corner and so that it fills the space completely with 100% width and height. This seemed to really work and makes the iframe look like this:

The ribbon on the top right is a little flourish I had been planning from the beginning to include. It ties the somewhat modern and garish element back into the theme of the website. I thought that everything else blended in quite well however the video was always going to be a little impacting due to the fact the thumbnail wouldn't necessarily adhere to my colour scheme. The ribbon helps to reign it in a little. I created it in Photoshop, exported it as a PNG and then placed it on the page using absolute positioning:

I used padding left to move it over to the right because that way it would be responsive left and right a little amount. The container stays at 960px (with 75px padding on the left and right). This means that I am basing the position of the ribbon from the side of the, fixed width, container and not the fluid browser window. If that was the case and I made it wider the ribbon would stay still and the video would slide right away from it. using padding in the container keeps it rock solid.