🎛️ Creating Metamedia

Now that you’ve created and optimized all your media layers, please download our Metamedia file template by clicking here and unzip the archive, if you haven't already.

💾 Rename Your Assets

1. Add all your media files (MP3, MP4, PNG, or TXT) to the assets folder inside the unzipped template.

2. Now, you must rename your asset files as follows:

• MP4 video files must be renamed to video-#.mp4 with # corresponding to the desired video layer stack, starting from 0 and counting up

• MP3 audio files must be renamed to audio-#.mp3 with # corresponding to the desired audio layer stack, starting from 0 and counting up.

• PNG image files must be renamed to image-#.png with # corresponding to the desired image layer stack, starting from 0 and counting up.

• TXT text files must be renamed to text-#.txt with # corresponding to the desired text layer stack, starting from 0 and counting up.

• If you don't rename your media assets as instructed, they will not be recognized or appear in your Metamedia.

💻 Edit The Index

Now it’s time to open the index.html file in your preferred code editor such as Visual Studio Code or any plain text editor and update the code. This is where you will arrange the assets as desired. It is crucial that you only change the lines of code indicated here, otherwise your Metamedia may not load correctly, or at all. It is also crucial you leave the CSS files and folder structure unaltered.

1. At the top of the index.html, edit your title and, optionally, content.

<!-- Change the title and description to your project -->
    <title>My First Metamedia Project</title>
    <meta name="description" content="Cool Metamedia Stuff">
<!-- End title and description -->

2. Now it’s time to decide on the location and color of our layer toggles by scrolling to the Menu section of the index.html, and editing the class area. The menu will appear as a line of toggles on hover along one of the four edges of the viewing window: left, top, right, or bottom. One of these four locations is the first word you need to add in the menu class quote marks. Then you must choose and type one of two color schemes: light or dark. Light offers white layer toggles and play/stop buttons, ideal for darker image layers. In contrast, dark provides black layer toggles and play/stop buttons, better suited for lighter visual content. Either way, you can also add a greyscale background to the menu by entering background color-white-## in the menu class section, where the number controls the opacity of the menu background; you can also add radius-#, with a number between 1-10 controlling the roundness of the background corners. The number of toggles is determined by the number of media assets correctly renamed and referenced in the Layers section of the index.html file. In this example below, a menu of black media toggles will appear alongside the right edge of the screen when the mouse hovers over the display.

<!-- Menu -->
      <div id="menu" class="right dark"></div>
<!-- End Menu -->

3. Finally, it’s time to arrange your layers. They will appear layered in the same order as you list them in the index.html, from top to bottom. To do this, scroll down to the Layers section.

📹 Video

To edit a video layer, look for the line that begins with <video. Change the # in id=”video-#” to the new file name number for the corresponding video layer. If you want to stretch a video rather than fill the native file dimensions, try switching the class="cover" to class="contain" or class="fill"; to leave a video layer at its original dimensions regardless of viewport context, try class="none". You can learn more about these class options here. If you want the video to repeat over and over, keep the word loop after the id; if you want it to only play once when the play button is pressed, remove the word loop. If you want this layer to be on by default, use data-checked=”true”; if you want it off when first loaded, use data-checked=”false” instead. Videos are automatically centered. To change a video's position, modify the class=”” section with: move-left-, move-right-, move-up-, or move-down-. Follow these with either 25, 33, 50, 66, or 75 to shift the video by the corresponding percentage. To change the opacity of a video layer, in the class section, add "opacity-" followed by a number between 10 and 90; we recommend rounding these to 10. To add a new video layer, copy the line that starts with <video and paste it onto a new line in the place you want it, changing the file number and any other elements as needed.

<video id="video-0" class="move-left-25" loop data-checked="true"></video>

🎶 Audio

To edit an audio layer, find the line starting with <audio and change the # in the id=”audio-#” to the updated file name number of the corresponding audio layer. If you want an audio layer to loop automatically, leave the word loop after the id reference; if you just want it to only once each time the play button is pressed, delete the word loop. Finally, if you want this layer to be active by default, set data-checked=”true”; if you prefer it switched off when first loaded, set data-checked=”false” instead. To add a new audio layer, copy the text line (starting with <audio) and paste it on a new line in the desired layer slot, updating the file reference number and other fields as needed.

<audio id="audio-0" loop data-checked="false"></audio>

📷 Image

To edit an image layer, find the line starting with <img and change the # in the id=”image-#” to the updated file name number of the corresponding image layer. If you want to stretch an image rather than fill the native file dimensions, try switching the class="cover" to class="contain" or class="fill"; to leave an image layer at its original dimensions regardless of viewport context, try class="none". Learn more about these class options here. You can adjust the alt=”name” field if you want the image to have a title appear during slower loading situations. Finally, if you want an image layer to be on by default, make sure to set data-checked=”true”; if you prefer it inactive on first load, set data-checked=”false” instead. Images are automatically centered. To change an image's position, modify the class=”” section with: move-left-, move-right-, move-up-, or move-down-. Follow these with either 25, 33, 50, 66, or 75 to shift the image by the corresponding percentage away from center in the specified direction. To change the opacity of an image layer, in the class section, add "opacity-" followed by a number between 10 and 90; we recommend rounding these to 10. To create a new image layer, copy the text line (starting with <img) and paste it in the desired layer slot, updating the file reference number and other fields as you like.

<img id="image-0" class="move-down-50 cover" alt="name" data-checked="true"/>

📃 Text

To edit the text layer, find the line starting with <div and change the number in the id=”text-#” to the updated file name of the corresponding text layer. In the class=”” area you can specify the text justification (right, center, left), alternate web colors (green, blue, red, etc.), whether to use serif or sans-serif fonts, or whether to add shadow. Again, if you want it activated by default, make sure to set data-checked=”true”; if you prefer a layer be inactive when first loaded, set data-checked=”false” instead. To change the opacity of a text layer, in the class section, add "opacity-" followed by a number between 10 and 90; we recommend rounding these to 10. If you want to use custom fonts, consider creating it as a PNG image layer instead. Otherwise, to create a new text layer, copy the text line (starting with <div) and paste it in the desired layer slot, editing the file reference number and other fields as needed.

<div id="text-0" class="center sans-serif" data-checked="false"></div>

📖 Layers Together

<!-- Layers -->
      <div id="layers">
      <img id="image-0" class="move-up-25 cover" alt="name" data-checked="true"/>
    	<img id="image-1" class="contain" alt="name" data-checked="false"/>
    	<div id="text-0" class="center sans-serif" data-checked="false"></div>
    	<img id="image-2" class="cover" alt="name" data-checked="false"/>
		  <audio id="audio-0" loop data-checked="false"></audio>
      <audio id="audio-1" data-checked="true"></audio>
      <video id="video-1" loop data-checked="false"></video>
      <video id="video-0" class="move-right-66 none" loop data-checked="true"></video>
      <img id="image-3" class="cover" alt="background" data-checked="true"/>
      </div>
<!-- End Layers -->