How to display video and audio in HTML preview in Visual Studio Code

Question

When I use the HTML5 video and audio tags in my code, video and audio appears when I load the file in a browser. They also appear when I use a HTML preview package in Atom, however, they appear greyed-out and are not interactive when I use Visual Studio Code and a HTML preview extension there.

At the bottom of the preview in Visual Studio Code, is a message:

Some content has been disabled in this document

When I hover over the message I see a tooltip

Potentially unsafe or insecure content has been disabled in the HTML Preview. Change the HTML preview security setting to allow insecure content or enable scripts.

I found the "HTML: Change Preview Security Settings" option in the Command Palette, however, changing the security settings caused no change. The video and audio are still greyed-out.

I'm new to Visual Studio Code and the preview not being an authentic version of what will be in the browser is annoying.

in Visual Studio Code

in Atom

Has anyone else come across this issue and does anyone know why this is?

Answer 1

I know it is a bit too late but had the same issue. The security settings menu appears in a very right hand corner of the main window and has 3 dots as an icon. Click on the menu to open html preview security options. See attached pix.

Answer 2

You can put your file in your Visual Studio Code framework. Then it will work...

Answer 3

Disable the change preview settings.

Answer 4

i faced the same problem today and after some research i got solution Reasons why it's grayed may be due to following reason: you wouldn't have the saved audio,image or video in the folder where your html code is saved.

Solution: make sure to save your file(code) and data(audio,image or video) in same folder. use live server for output.