Best way to include a 1080p 3 minute video on webpage

Hi there,

I am totally new to web design and building websites. I have started creating a website with Hype 3 and I am finding it absolutely great so far! I have now reached a point though where I would like some advice. I am looking to have a page which will play my current film showreel fullscreen.

I have looked into embedding YouTube or Vimeo videos. However its not achieving the look I am after, which is to be fullscreen without any controls and is responsive.

So I have completed a few tests by dragging video directly into Hype from my desktop and have got the look I am looking to achieve.

However I am not sure if it will work having a 3 minute (maybe longer) 1080p video on a webpage, roughly (450mb). Will it take forever to load when a user opens the webpage?

Look forward to hearing any advice

Thanks Kind Regards

Ollie

yes it will definitely slow down the internet.
and you need to think about the traffic as well.
if your server is limited to 10Gb a day.
your server will be down when more than 22 people visit your website.

i suggest you link the video and try to google and find out how to edit youtube source code to let you autoplay the video.

welcome to Hype community btw !!!

ps. apple devices don’t let you autoplay videos. this is the huge problem to many of us.
I am sure there is a sneaky way to let autoplay videos.
anyway i do not recommend you to put 450mb video to your website.

Thanks for the advice, I hadn’t considered any of those points.

I will search around to try and find a way to edit the source code as you suggest. Seems that will be the best way if it can be done / if I can find out how it can be done.

Autoplay isn’t so much of an issue in my case for now, but thanks for the heads up!

Thanks Ollie

Also if it’s encoded as an MP4, it should be much smaller than 450MB. Run it through Miro Video encoder and export as an MP4 and I’ll bet you get a much healthier size.

Check out our Video Documentation also for the other required formats.

How does Facebook do Auto play on iOS devices within their App?

This was happening to me and others and was not a setting we switch on in the first place..

I would look for a third party player which would do what you want and let you stream a file url. You could store it on google drive, set the folder to public (anyone can access) and then click share on the file. You will get a long url but you should copy the id part after the ‘d’ and before the ‘sharing bit’ then put that id in to the following URL. http://googledrive.com/host/YOUR_ID_HERE that should work and it is what I am doing to embed hd videos in my iOS app.

In app autoplay is possible. I meant autoplay is not available in ios browsers.

1 Like

embed from vimeo or youtube, http streaming is slow and you have to deal with compatibility across devices and browsers. also you can autoplay with a variable.

1 Like

Vimeo does let you use their hosted video links with a third-party player. You may need a Vimeo Pro account but it’ll work.

I mixed two chunks of code and came with this, a youtube responsive embed without controls, only it shows the yt watermark on over, but it’s pretty damn close!

take a look at my file.

RESPONSIVE-NO-CONTROLS-YT-EMBED.hype.zip (14.1 KB)

Thanks for sharing this. Nice idea to use http://embedresponsively.com.

For reference, here is the code being used in the HTML widget (which is set to scale with pinning and scaling)

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src="http://www.youtube.com/embed/QH2-TGUlwu4?vq=hd1080&autoplay=1&controls=0&iv_load_policy=3&rel=0&showinfo=0&theme=light&color=white" frameborder="0"></iframe></div>
2 Likes

the other half comes from http://www.classynemesis.com/projects/ytembed/ there’s a lot of tweaking you can do there.

edit: you can get rid of the watermark here replacing it for another or an empty png: