I approve of this
****I GOT THE GOLD LINES WITH GRADIENT!!! *****
Frame detail:
Code that did it:
#gold_line_01 {background: linear-gradient(to bottom, rgba(255,215,0,1), rgba(255,215,0,0) 0%); height:100%;width:8;}
#gold_line_02 {background: linear-gradient(to top, rgba(255,215,0,1), rgba(255,215,0,0) 50%); height:100%;width:5; }
etc.
I exported the gold lines, with transparent backgoround, as a quicktime animation (.mov), then re-imported it as an overlay.
Woo hoo!
Next challenge: make the blue logo slightly transparent …
2 Likes
1 Like
Marvellous ! It looks really good! I did not expect you to make the change today, especially if you have some time consuming tasks.
By the way, is there a reason why you used three lines instead of two? And on both sides instead of only the left side?
It is interesting how you were able to achieve a similar effect with Shotcut + WebVfx. I am curious to know how they achieved it.
THANKS! 
I was a bit elated when I found the gold lines with transparency worked! Did you notice ??!
Now there’s further development … (I found a bit of spare time today in the end, thankfully)…
- I had success making the blue logo semi-transparent by indeed changing the black colour of the matte file to #383838 (a darkish grey), then I tinkered with the “softness” parameter in Mask:from file and found that a value of about 85% was perfect for showing the footballer and the penalty shot through the logo.
Then, the icing…
- Applied a “Rotate and Scale” filter to the static logo .png and keyframed it from 100% to 130%, exported it, then re-imported it. So the background logo zooms in…
Also:
-
Reduced the number of gold lines to two to replicate the original (@samth, well spotted. I had no reason for putting 5 lines in earlier apart from to see if it worked OK and actually I thought it looked nice, but then I used the adage “less is more” and now I think it looks fine with just two lines, as per the original…)
-
added a slight dissolve between the two football clips (on V1) now that they can be seen slightly…
… and this is the final (I hope!) result - TA – DAH !!:
https://streamable.com/dt3y9
As I said earlier, it has been a lot of work for such a short effect but it’s worth the effort to me - I’m going to use my HTML file as a template for other ideas and also the newly-learnt techniques for future projects.
PS To get it even closer to the original I need to make it a little faster, probably 2 seconds long or even 1 second (It’s 3 seconds at present). Easy to do but I’d have to make a new matte file.
[EDIT - for reference, here’s the original BBC version again:
I am truly astonished 
. This is spot-on and I cannot fault it 
.
I like your version slightly better because it takes a bit longer (your hard work has to be perceivable) and it seems a bit more ethereal (probably due to a lower opacity).
Really? I did not notice that one bit 
. (Lot of exclamation marks, a picture with balloons etc. But I can understand why 
.)
Well done @jonray
Considering that the original BBC one was probably done on a Vizrt or Ross GFX system costing tens of thousands of pounds, your one done on a home computer with an open source video editor, makes it even more fantastic.