See the Pen A landing page with background video by Rounak Polley (@cfjr) on CodePen.
This pen I have created only to showcase how to effectively embedded youtube videos as backgrounds. Heads up ! while we can use any video for experimental purposes for actual webpages always use videos with copyrights.
Lucky for me I used a video from my own youtube channel (My channel).
A landing page is the first thing the user lands on when visiting a website which makes is extremely important to leave a positive impression at first sight. Perhaps you want to showcase your brand or products or add a content relating to your website.
There are many ways of creating it but I think that creating one with underlying video is more challenging than other ones.
Here's what I found out...
If we just copy and paste the embedded code and set the <iframe> to take up the entire screen we are going to end up with lots of black space around the video which adjusts itself as we resize the browser window obviously nobody wants that! (not specially on a landing page).
So, I tried another way I tried adding the background as an animated gif (compromising on the sound & I haven't seen landing pages with audio actually but I wanted audio as well).
Alas, I couldn't get any online resource to create a gif of longer than a minute and even my photoshop got upset in converting a 2min 32sec video into gif.
I tried some other things like styling the <video> element created within the <iframe> until I realized that I needed to make my embedded iframe responsive.
But, it too breaks down at extremely narrow browser size revealing white background underneath so I added a fixed positioned bottom centred gradient as background.
One thing that beats me is that I can't get the youtube video to loop (which user will probably find-out if he/she stays on the page for long enough) I did what the official sources said YouTube Embedded Players and Player Parameters (other sources give same info.) which is loop=1.
Further more colour or gradient overlays can be added on top of the background video like I added a curtain for framing.
I also added some simple text (with text shadow to improve readability) on the page with Log in & Sign up buttons with complimentary button styles.
And adding the usual Bootstrap classes to the required foreground components wraps up the thing.
And, as usual for complete code ...
See the Pen A landing page with background video by Rounak Polley (@cfjr) on CodePen.
Top comments (0)