Embed Tetron Editor with Materialize CSS in SharePoint
1
Open Your SharePoint Page
1Step 1
Go to your Modern SharePoint site.
2Step 2
Click 'Edit' on the page.
3Step 3
Click the '+' sign to add a web part.
4Step 4
Choose 'Embed'.
2
Paste the Code Snippet
1<!-- Load Materialize CSS -->
2<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
3
4<style>
5.video-container iframe {
6 width: 100%;
7 height: 315px;
8 border: none;
9}
10</style>
11
12<div class="container">
13 <h5 class="center-align">Embedded Tetron in Materialize</h5>
14
15 <!-- Tetron Embed -->
16 <div class="card">
17 <div class="card-content">
18 <span class="card-title">Tetron Editor</span>
19 <div class="video-container">
20 <iframe
21 src="http://staging.tetrons.com/editor/dist/editor-host.html"
22 title="Tetron Editor"
23 allowfullscreen
24 frameborder="0"
25 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
26 referrerpolicy="strict-origin-when-cross-origin">
27 </iframe>
28 </div>
29 </div>
30 </div>
31</div>3
Important Notes
1Step 1
Modern SharePoint blocks some scripts and inline JS.
2Step 2
You cannot use <script> tags in Modern SharePoint Embed web parts, so Materialize JS won't work unless in a Classic page or custom SPFx solution.
3Step 3
Only CSS and HTML are reliably supported in the Embed web part.
4Step 4
If your SharePoint is on HTTPS, ensure the Tetron URL also uses HTTPS to avoid mixed content issues.
4
Optional (Classic Page / Script Editor)
1<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>Output Preview
