> For the complete documentation index, see [llms.txt](https://docs.comet.ucar.edu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.comet.ucar.edu/lesson-dev/latest-core-template/media-elements.md).

# Media Elements

For file types: **JPG**, **PNG**, and **GIF**

PHP Code Snippet (Dynamic)

```php
<?php echo $mm->getPrintMediaItemWrapper(MSDB_ID); ?>
//COMET API Options: (msdb id, caption, class, style) 
```

| Name    | Type   | Default | Description                                                                |
| ------- | ------ | ------- | -------------------------------------------------------------------------- |
| msdb id | number | 00000   | This is the given MetEd MSDB File ID found in the Active Projects records. |
| caption | string | *empty* | Set a caption for this media item.                                         |
| class   | string | *empty* | Set a HTML class attribute. (This removes the DIV.center wrapper)          |
| style   | string | *empty* | Set inline styles. (This removes the DIV.center wrapper)                   |

### Video

***

For file types: **MP4**

#### Video size best practices

To create standard 16:9 videos for this template use:

* 1280 x 720
* 800 x 450

PHP Code Snippet (Dynamic)

```php
<?php echo $mm->getPrintMediaItemWrapper(MSDB_ID); ?>
//COMET API Options: (msdb id, caption, class, style) Set additional options in MediaSpec DB
 
//Deprecated:
/*<?php echo $mm->getPrintMP4Wrapper(MSDB_ID, false, false); ?>*/
//COMET API Options: (msdb id, autoplay, loop) 
```

| Name    | Type   | Default | Description                                                                |
| ------- | ------ | ------- | -------------------------------------------------------------------------- |
| msdb id | number | 00000   | This is the given MetEd MSDB File ID found in the Active Projects records. |
| caption | string | *empty* | Set a caption for this media item.                                         |
| class   | string | *empty* | Set a HTML class attribute. (This removes the DIV.center wrapper)          |
| style   | string | *empty* | Set inline styles. (This removes the DIV.center wrapper)                   |

HTML Code Snippet (Static)

```html
<div class="videowrap-16x9">
    <script type="text/javascript">
        if (printVersion) {
            // Use still image for Print Module
            document.write('<a href="media/video/SAMPLE_VIDEO.mp4"><img class="img-responsive center-block" src="media/video/SAMPLE_VIDEO.jpg" alt="TEXT_CAPTION"/><p class="text-center">Download Video</p></a>');
        } else {
            // Use HTML5 player with Adobe Flash fallback
            document.write('<video class="html5video" width="640" height="360" style="max-width:100%;" poster="media/video/SAMPLE_VIDEO.jpg" preload="none" controls playsinline><source src="media/video/SAMPLE_VIDEO.mp4" type="video/mp4"></video>');
        }
    </script>
</div>
```

### Audio

***

Basic graphic data looper with controls

PHP Code (Dynamic)

<pre class="language-php"><code class="lang-php"><strong>&#x3C;?php echo $mm->getPrintMediaItemWrapper(MSDB_ID); ?>
</strong>//COMET API Options: (msdb id, caption, class, style) Set additional options in html file and MediaSpec DB 
</code></pre>

HTML Code Snippet (Static)

<pre class="language-html"><code class="lang-html"><strong>&#x3C;audio class="html5audio" controls>    
</strong><strong>    &#x3C;source src="media/audio/SAMPLE_AUDIO.mp3" type="audio/mp3" />
</strong><strong>&#x3C;/audio>
</strong></code></pre>

### Other Media

***

#### HTM (embedded iframe)

Basic graphic data looper with controls

PHP Code (Dynamic)

<pre class="language-php"><code class="lang-php"><strong>&#x3C;?php echo $mm->getPrintMediaItemWrapper(MSDB_ID); ?>
</strong>//COMET API Options: (msdb id, caption, class, style) Set additional options in html file and MediaSpec DB 
</code></pre>

HTML Code (Static)

```html
<script type="text/javascript">
  if (printVersion) {
    //use still image
    document.write('<a href="media/loops/SAMPLE_LOOP/index.htm" class="datalooper fancybox.iframe"><img src="media/loops/SAMPLE_LOOP/SAMPLE_LOOP_01.jpg" alt="" class="img-responsive center-block"></a>');
  } else {
    //use data loop
    document.write('<iframe src="media/loops/SAMPLE_LOOP/index.htm" width="640" height="480" frameborder="0" style="min-height:560px;"></iframe>');
  }
</script>
```

#### PDF (documents and other files)

For PDF files, simply link to the actual file with an external target and let the client decide how to handle it.

{% hint style="danger" %}
**Deprecation Notice!**

Support for all these file types: ***-.SWF -.WAV -.FLV -.WMV -.AVI -.MOV*** has been deprecated for development, please convert them to a compatible file type to use them in a LC template based lesson.
{% endhint %}