Streaming live at 10am (PST)

Adding .mp4 with custom code


#1

Hi Guys,

I’m trying to add an .mp4 animation I made to my site.

After some research I decided to host my video on dropbox (as I don’t want ads from youtube).

I used the embed code function with this wrapper so my code looks like this:

It works - that’s fantastic. But the video is absolutely massive. Is there a way for me to scale it to fit inside the flex container it’s in?

Thanks in advance!


#2

Videos are very heavy, it would be better to use a video tool (such as Handbrake https://handbrake.fr/downloads.php) to recompress the video and change its dimensions at the same time.

A container is 940px so use that value for the width of the video.

Handbrake is free, and neat.


#3

Thanks Vincent, I’ll give that a try. I don’t really want to have to go back in to after effects and scale my composition every time I want to put something new on my PF so hopefully Handbrake will do the trick!


#4

Just a thought - my containers on this site are set to 90% rather than an fixed width so this isn’t going to work is it? I need the video to scale inside it’s container?


#5

That’s 2 different things. You said the video was massive and that’s not good for the web, so the first thing I advise you to do is to recompress the video at a reasonable size. 940 will do.

Then, come back and give us your read only link, and show us your custom code, and we will show you wnat to add in the HTML so that the video always takes up 100% of the parent element it is in.

Just an FYI, normally if you want your HTML5 video to be played everywhere by every browser, you need at least 2 formats: MP4+Webm or MP4+OGG. And they must both be declared in the code. We can concentrate on the MP4 for now. (must be H264+AAC or MP3 sound).