Hi, everyone. First post here.

When I first considered posting a question about this I thought of doing the regular explanations, show some code, and so on. But then I thought it just best to link to the template in question.

The question here has to do with substituting the video clip on a template with another clip.

I used HandBrake to make the clips, one in MP4 and the other in WebM.

The difference between original and new clips is that the original are 1920x1080 while new clips are 1210x702 due to cropping.

I figured that being an html5 video - at least I think it's html5 - that it would be responsive, etc. But since the new clips aren't playing then there's something somewhere that's glitching. Maybe the video clips are too small in size (width, height), or something.

Now, what I have noticed is that the video plays if opened up to a certain size but then if collapsed it stops.

Anyway, I figure best to let someone who knows more about this to just look at the example than me trying to explain what's what.

Here's the link to the demo: https://templated.co/transitive

Thanks for any suggestions.

Daniel

It switches to an image at smaller screen sizes. So it sets the video to display none
main.css line 3797

Eric

Thanks for responding.

Well, this thing is just weird. What I did was put the template on my server, that way I could tweak it, etc., so I'd know what it looks like.

Now here are the files in the directory:



Notice that the original mp4, webm, and ogv have been changed to 'orig-banner.mp4', and so on for each format. I then renamed the video clips that I want to use (mp4 and webm) to 'banner' so I wouldn't have to change code elsewhere. But even with that change, the original video (cars/street) keeps playing.

I've gone up and down the code but can't find anything. I even checked the JS folder but the only thing there has 'banner' also.

How can it be playing the same video if I renamed the video files?

Here's the link to server: https://sitesetis.com/videospage/transitive/index.html

Daniel

Ok, now I'm really confused.

I just checked the link and now it shows the Lake Mead 'still' but it's not playing. Maybe it had to cache or something?

Anyway, right video - but not playing.

It auto plays in Edge for me, but not FX or Chrome.
In FX I get
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted.
I did this but it still doesn't play.
https://support.mozilla.org/en-US/kb/block-autoplay
Something going on here.
Looks like the js isn't appending the video.

Eric

Well, I use Firefox and so I went to settings and allowed for sound to play. Sure enough, now the video runs. Strange, I would have thought that maybe the video would play without sound but apparently it's set up to stop the media itself if not allowed. For example, YouTube videos play sound right away. Or is it because I click it to do so rather than something coming on automatically? Anyway, I think I may make a clip without sound just in case many browser users out there have the block on.

Here's the link to the server showing how it plays: https://sitesetis.com/videospage/transitive/index.html The video was made with a small Lumix camera, 1280x720, so the image is not as sharp and of course it has a tiny microphone which doesn't provide the sound quality as experienced out there.. You can see the 5 minute version of that video here: "A Friend Visits - 2018" . It's the last video in the piece and since it's smaller then it's sharper.

Thanks for all your help and it probably would have been awhile finding out about the sound block if you hadn't informed me of it. It's interesting that even though I've been coding since 2000 that after all this time there are still little glitches that befuddle now and then.

By the way, the pup looks friendly.

Will let you know when the new domain is online.

Cheers

Daniel