Video not playing properly in breakpoints

[Crackpot Head]

I have a video that autoplays on page load then fades out and then the page contents fade in. I have six break points on my page– the largest is 1920 then 1280... to 320. When the page loads in 1920 the video works perfectly, it starts full screen and then fades out. In 1280 and down it starts but the height is mid screen and on fade out it leaves a black rectangle on the page. I am using this code in an html container in 1920:

<div class="vid">
   <video autoplay height= "auto" width= "auto" muted>
   <source src="assets/movie.mp4" type="video/mp4">
   </video>
</div>
<script class="vid">
var el = document.querySelector('.vid');
var op = parseFloat(el.style.opacity);
function fadeOut(element, duration) {
  var s = element.style, step = 25/(duration || 300);
  s.opacity = s.opacity || 1;
  (function fade() { (s.opacity -= step) < 0 ? s.display = "none" :
  setTimeout(fade, 25); })();
}
setTimeout(function(){
fadeOut(el, 1000);
}, 9000);
</script>

In 1280 and down, I'm using the same code but I've specified the height and width of the video for each break point because the video was not playing at all in those break points. For each breakpoint the html container is hidden for all other breakpoints so I have seven html containers– one for each breakpoint.The video now plays in all break points but in breakpoints 1280 and down it displays mid screen height (I would like it to play at the top of the screen) and it fades to black, leaving a black rectangle in the middle of the screen.

I'm still a novice at coding, I can read it and generally understand what it is doing but trouble shooting is difficult. Any help would be appreciated, thank you.

[Ussnorway]

1st, this is Muse and div codes should be used in Dreamweaver if you want to play with code... you are putting a square peg in a round hole with this workflow mate.

2nd, have you tried putting your code in a master page and having just the one breakpoint?

3rd, you do know that not all browsers will play a mp4 file?

[Crackpot Head]

If Muse can't handle inserted html code then why is there an explicit insert html code feature? In essence isn't this what muse widgets do?  As I mentioned the video plays in all breakpoints, it is the positioning and fade that are the problem. The code works perfectly in the 1920 breakpoint, the problem is in the other breakpoints.  When I try it on the master page with only one html container,  I'm back to my problem where the video does not play or resize in the smaller breakpoints.

[Ussnorway]

https://forums.adobe.com/people/Crackpot+Head  wrote

isn't this what muse widgets do?

not really, they tend to use bootstrap (MuCow) plugins

https://forums.adobe.com/people/Crackpot+Head  wrote

In 1280 and down, I'm using the same code but I've specified the height and width of the video for each break point because the video was not playing at all in those break points. For each breakpoint the html container is hidden for all other breakpoints so I have seven html containers– one for each breakpoint.T

are they named different, does these other breakpoints have fixed sizes (not fluid) and is the insert-html set to full browser width?

p.s, the .muse file would help

[Pavel_Homeriki]

4th. The code is not inserted correctly - the script should be pasted to the end of the body.

5th. If javascript is used, then the object will not be hidden at the breakpoint, even if you have hidden it.

6th. Just take one of the third-party, ready-made widgets.

[Crackpot Head]

Thanks Pavel, I was wondering if it wasn't the java script that was the problem.  I have a subscription to Muse for You and have been looking at the responsive video widget which works but the problem is the fade out. I've tried creating a blank composition widget with two slide - one with the video and the other blank with 0 opacity- and using that as my fade out. The fade out works but the video is no longer responsive

[Crackpot Head · Accepted solution]

So here's what I've done. I created an html container in the 1920 breakpoint and inserted this code

     <video autoplay width="100%" height="100%" >

             <source src="assets/Video.mp4" type="video/mp4">

     </video>

I pinned it to the top of the page, set it to responsive width and set it to hide in other breakpoints. I applied a graphic style to it called introstrt. I then copied the container and pasted it into each other breakpoint. On the master page I used the Muse for You Animator widget. I set the widget to the graphic style introstrt and the animation to fade out. I set the animation delay to the length of the video and the animation duration to 1000ms. I disabled Fade in and set the Fade out duration to 1000ms and opacity to 0.

The video now autoplays when the page loads and fades out and then the main content fades in. The video plays in all breakpoints and resizes within the breakpoints. The only problem I have is when I resize the page and pass a breakpoint, the video container goes black and then fades out after the set animation delay. That's because when I pass a breakpoint the page reloads from start including the video container but the video does not.  Unless someone knows how to fix this, I'll live with it.