5

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 Visual Studio Code

In Atom: in Atom

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

Peter Macej
  • 4,831
  • 22
  • 49
Austin
  • 51
  • 1
  • 1
  • 5
  • Use a real browser; Open the file in the browser, make a change in Atom or VSC, save it, refresh the browser, and you'll be in the true environment you're writing for and your users will use. That's the best and most accurate test and works with all browsers. – the Tin Man May 15 '20 at 21:20
  • I ended up using the Live Server extension in Visual Studio Code. This seems to be the most popular solution. What's great about it is that it auto-updates in the browser when I save my HTML file. – Austin May 17 '20 at 21:59

5 Answers5

4

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.

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
A.Soll
  • 41
  • 2
2

Disable the change preview settings. enter image description here

vipin
  • 357
  • 3
  • 9
1

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

enter image description here

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
samet yaprak
  • 11
  • 2
0

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.

cs Vijay Shankar Yadav
  • 1
  • 1
0

My folder was named CSS and I just changed the name of the folder and it fixed the problem.

Kim
  • 1