ux customization - video tag not working

[ragedrk]

Hello, tag video seems supported but not working, only the very first frame is loaded, it does not play or stream, like the Azure B2C injected html load the page and then stop asking for content from the video source. mp4 and webm doesn't work, CORS allowed and working, html code is correct because the page works fine when called directly and not by Azure B2C. Tried with source video file both on a public web site and from blob container (both with CORS configured).

snippet (css is not here but linked with absolute link as per documentations)

<div id="api"></div>       
       <div class="fullscreen-bg"
      <video loop muted autoplay class="fullscreen-bgvideo">
<source src="https://xxxxx.blob.core.windows.net/xxxxx/xxxx.mp4" type="video/mp4"> 
        </video>
    </div>   

edit code formatting

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 0b1a5dbe-3776-6cbf-41b1-a2b00dcfe95e
• Version Independent ID: 14bb0adf-b9d0-7f70-1d35-ba38e85e0f65
• Content: About user interface customization in Azure Active Directory B2C
• Content Source: articles/active-directory-b2c/customize-ui-overview.md
• Service: active-directory
• Sub-service: b2c
• GitHub Login: @mmacy
• Microsoft Alias: marsma

[frankhu-2021]

@ragedrk Thanks for your feedback! We will investigate and update as appropriate.

[frankhu-2021]

Hey @ragedrk can you clarify what the request is? It seems like you're saying that the b2c video tag doesn't seem to be working properly when injected?

Could you provide a screen recorder or a gif or a set of screenshots with explanation of this happening?

[ragedrk]

Hello @FrankHu-MSFT! Yes that's right, I've created a very simple page to be used as custom one for a UserFlow. It simply contains the <div id="api"><div> and another with the video with video autoplay loop muted width and heigth. As soon as the Page loads from a UserFlow only the first frame from the video is loaded and displayed (the black box in the image), the injected fields and data are correctly shown. Page works correctly if not opened from an userFlow but directly (of course no B2C fields and data).

edit: code formatting for div id=api

[ragedrk]

quick update, it seems that the only video tag that doesn't work is autoplay because controls and muted are working.

`

`

[frankhu-2021]

Hello @ragedrk I see, interesting. Let me get back with my team and see if we can figure out what's going on. Stay tuned, thanks!

[mmacy]

Hi @ragedrk, on the autoplay issue, because B2C uses the CORS approach to assemble the pages, you'll need to include some JavaScript to start the video on page load. Because B2C merges the UI elements with the HTML content loaded from your URL, it doesn't know when the page is fully "loaded," thus the autoplay isn't triggered.

reassign:mmacy

[ragedrk]

Ok, good know, I'll use some js then, thank you all fir the feedback.

pleaseclose

[ragedrk]

Ok, good know, I'll use some js then, thank you all fir the feedback.

pleaseclose