Skip to content

Snippets / HTML

HTML

Add Help Video to UI HTML for Fields

D Donald McGuinn · 141 views · Updated 2 years ago
Just a little idea for you maybe = Using the UI-HTML added little helper video made with screen record and Ai (voice over provided by elevenlabs) helps the user if they get stuck script below for those who want it
Add this into the UI HTML field in the post type fields.
<style>
.about-help-box {
border: none;
overflow: hidden;
transition: max-height 0.3s ease, max-width 0.3s ease;
max-height: 0;
max-width: 0;
padding: 0;
}
.about-help-content {
display: none;
padding: 10px;
background-color: #fff;
}
.about-help-content video {
width: 100%;
height: auto;
}
.about-shrink-button {
margin-top: 10px;
padding: 5px 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.about-help-link {
cursor: pointer;
color: blue;
text-decoration: underline;
display: flex;
align-items: center;
}
.about-help-link img {
width: 20px;
height: 20px;
margin-right: 5px;
}
</style>
<div class="about-help-link" id="aboutHelpHeader">
<img src="https://img.icons8.com/ios-glyphs/30/000000/info.png" alt="Info Icon">
<span>Help me</span>
</div>
<div class="about-help-box" id="aboutHelpBox">
<div class="about-help-content" id="aboutHelpContent">
<video controls>
<source src="link-to-your-video-here" type="video/mp4">
Your browser does not support the video tag.
</video>
<button class="about-shrink-button" id="aboutShrinkButton">Shrink</button>
</div>
</div>
<script>
document.getElementById('aboutHelpHeader').onclick = function() {
var helpBox = document.getElementById('aboutHelpBox');
var helpContent = document.getElementById('aboutHelpContent');
if (helpContent.style.display === 'none' || helpContent.style.display === '') {
helpContent.style.display = 'block';
helpBox.style.maxHeight = '500px'; // Adjust as needed
helpBox.style.maxWidth = '600px'; // Adjust as needed
helpBox.style.padding = '10px';
} else {
helpContent.style.display = 'none';
helpBox.style.maxHeight = '0';
helpBox.style.maxWidth = '0';
helpBox.style.padding = '0';
}
};
document.getElementById('aboutShrinkButton').onclick = function() {
var helpBox = document.getElementById('aboutHelpBox');
var helpContent = document.getElementById('aboutHelpContent');
helpContent.style.display = 'none';
helpBox.style.maxHeight = '0';
helpBox.style.maxWidth = '0';
helpBox.style.padding = '0';
};
</script>
HTML · 78 lines

Discussion

Ask a question or share how you used this.

Log in to join the discussion.

No comments yet — be the first.

Voxel Guide assistant
Ask about snippets, addons & how-tos

Hey — how can I help?

I can dig through the library for snippets, addons, and tutorials.

AI can be wrong — double-check anything important.