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!


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 :

Exemple of code :

<!--Load videojs and nuevo plugin-->
	<script type="text/javascript" src="//"></script>
	<script type="text/javascript" src="//"></script>
	<script src="[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="" type="application/x-mpegURL">
	<!--Initialize the player and plugin-->

	// 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');
			logo: "",
			logourl: "/"
		player.chromecast({ button:'controlbar' });

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>