A transition can only work when there is a change from one state to another. If the element is initially hidden with display: none and then subsequently revealed then the only styles that are in force are the ones shown when it is displayed. There is no transition! It just starts at the new position. Any position it had at display: none is irrelevant as far as a transition is concerned. It only sees the new styles and there is no transition
I’ve explained this to you over and over again. For a transition to be viable the element needs to displayed on the screen (or out of sight but not display: none) then you could add a class at some point after that and a transition could occur. Think of it like a hover effect. The element is in view and then when you hover you change something so that can cause the transition from one state to another.
Animation on the other hand works by animating from one value to another (or multiples) explicitly.
Had your element been hidden off screen (or some other method) then the transition could be made to work and from the html you have this would be the path.
You know how to hide things without display: none so I don’t really know what you are asking for?
.video-containerB.hide,
.video-containerC.hide{
display: block;/* only needed if you have display:none defined elsewhere*/
visibility:hidden;
position:absolute;
width:1px;
height:1px;
overflow:hidden;
left:-100vw;
}
Or one of a number of methods depending on criteria required.