FrameTrail
Tutorials
Installation
Getting Started
Editing Hypervideos
Managing Resources
User Management
Advanced Use
FAQ
Project
Background
Roadmap
Developers
API Docs
Contributing
Tutorials - Advanced Use
Javascript Code Snippets
Select, copy snippet and paste into the "
Actions
" fields (
onReady
,
onClick
,
onStart
, etc.)
(Continue) playing current Hypervideo
copy
Pause current Hypervideo
copy
Jump to time 20 seconds (timing are always seconds)
copy
Go to different Hypervideo (the ID, so here 3, of the Hypervideo is in the URL
copy
Go to different Hypervideo and start at second 20 (the ID, so here 3, of the Hypervideo is in the URL
copy
CSS Code Snippets
Select, copy snippet and paste into the "
Custom CSS
" fields
Animate overlays (optionally filtered by type) on mouseover
.overlayElement .resourceDetail[data-type="image"]:hover { cursor: pointer; transform: scale(1.3); transition-duration: 500ms; }
copy
Change size of right (or left) layout area to 50% width
see
Getting Started
> Layout Areas
.areaRightContainer[data-size="large"]:not(.closed) { flex: 0 0 50%; min-width: 50%; }
copy
Change size of top (or bottom) layout area to 25% height
see
Getting Started
> Layout Areas
.areaTopContainer[data-size="large"]:not(.closed) { flex: 0 0 25%; min-height: 25%; }
copy
Installation
Getting Started
Editing Hypervideos
Managing Resources
User Management
Advanced Use