Modifications to Kristian Youngs Website Part 1



Few modifications are on the go for Kristian Young’s portfolio site (kristianyoung.com). Had a request off Kristian to look at having a promo video as a background of his site when it first loads up.

Initial thoughts were sceptical as I wasn’t sure how well this would work with the responsive nature of the site. Started off looking into how it could be done. Researching the different routes I could take in creating the effect that Kristian is looking for, first off I looked at a HTML5 video format and CSS functionality.

 

<video autoplay loop poster="image.jpg" id="bgvid">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>

 

video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(image.jpg) no-repeat;
background-size: cover;
}

Started to work on this way of creating the background video promo, however first issue straight away mobile compatibility. When I went to check how this was working on my iPhone the video would not automatically play and would only play in the native video player on the phone.

Back to the drawing board!