Elements Project: Implementing Video Background

One of the main things I noticed during my research into science museum, exhibition websites is that they all use some form of video, or imagery at the top of the website to give off the feel of the exhibition.

I decided to implement this but by using a video background, but I also had to make this responsive so it was accessible across different devices, and still holds its structure no matter what screen size the website is being viewed on, I came across some code that allowed me to do this, but that doesn’t use JavaScript.

My first step was to find a video that that fit the exhibition and gave off the feel and the emotion of my exhibition. Once I had done this I created a folder within my file tree named ‘Vids’.

Once I had my video up in the correct folder onto the remote server, I implemented the code into the index file that allowed me to add the video

video1

Once I had added the video, I created a container using a class for the video, so I could set the width of the video to ‘100%’ within the style sheet.

Then within the ‘CSS’ style sheet I added media queries, to change the width and height of the video when it is resized down onto different screen sized. So the video could adapt and change its size, dependent on the size of the device it is viewed on.

video2

This image bellow shows of the video background, it is fully responsive and can be viewed on the website I created. (Link on blog)

video3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s