Videojs in markdown probs ?

Hello !

I have a little problem with the integration of the videojs script.

I added the css in the head of the site but when I put the rest of the code via markdown (with the code function) it transcribes it as text!

Example: https://prnt.sc/skrc1g

Do you have an idea ?

Raw code is stripped out of markdown by default. This is because in some scenarios it leads to XSS (cross-site scripting)

If you can 100% trust the content, then it's ok.

What's the use case? There are some tricks to get around it.

It is a script used to replace JWplayer that we no longer use. The content is 100% safe since it comes from our CDN.

Like this page : https://www.netgen-esports.be/work/ego-be-brussels-esport-show

Exemple of code :

<!--Load videojs and nuevo plugin-->
	<script type="text/javascript" src="//cdn.netgen-esports.be/video/player/videojs/video.min.js"></script>
	<script type="text/javascript" src="//cdn.netgen-esports.be/video/player/videojs/nuevo.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vjs-quality-picker.min.js"></script>
	<!--Video tag setup-->
	<video id="player_one" class="video-js vjs-fluid vjs-default-skin" controls preload playsinline poster="images/poster.jpg">
		<source src="https://videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81/manifest/video.m3u8" type="application/x-mpegURL">
	</video>
	
	<!--Initialize the player and plugin-->
	<script>

	// Optionally override HTML native playback, usually required for Android devices, but not for iOS.
		videojs.options.hls.overrideNative = true;
		videojs.options.html5.nativeAudioTracks = false;
		videojs.options.html5.nativeTextTracks = false;

		var player = videojs('player_one');
		player.nuevo({ 
			logo: "https://netgen-esports.be/logo-a9bb1f94.png",
			logourl: "/netgen-esports.be"
		});
		player.chromecast({ button:'controlbar' });
      
	</script>
	```

For now, you can use embed code I think but you can't direct load JavaScript.

I can think about this but it creates a real security risk in many scenarios.

Can we add the script by package.json ?

Here's what you can do, we'll load in what you'd like as a component.

Step 1: Add a component that does everything you need that code to do.

Step 2: Add the component as a setting in your factor-settings file:

export default {
	myComponent: () => import("./path/to/component.vue")
}

Step 3: Use the special <component class="inject-component"> element directly in your markdown

# my markdown
<component class="inject-component" id="myComponent"></component>