有名な例
例えばこんなものが作れる
SCPの画像ボックスを使って、動画を入れる記事は有名なものだと、SCP-895がありますよね。今回はこういうものの作り方の情報共有です。
もしこれを丁寧なエッセイにしたら、凄まじい長さになると思うので、概要だけを掻い摘んで見ました。つまり、読者のhtmlとjsとcssの知識を前提にしています。わからないことがあれば、こちらのフォーラムで聞いてくださいね！後、情報共有できそうなことがあったら是非教えてください！
基本的な考え方
動画やAnimated Gifを使わない
もちろん、動画やGifアニメをアップロードしても構いません。しかし、Gifアニメならまだしも動画だと埋め込みが困難です。
そして、これらのいずれもサイズが大きく、読み込みに時間がかかってしまいますし、何より監視カメラ感を出すためのタイムスタンプを入れることができません。したがって、動画やGifアニメなどの変化が起こらないファイルはSCP記事においては不利であるのです。
html+css+jsの組み合わせを全部アップロードして使おう！
SCP-845や、今回私が用意した例は、動画ではなく、JavaScriptでブラウザの読み込み時点で生成した映像です。ですから、軽く、タイムスタンプを押すことができて、実行時点で色々見た目が変わるという圧倒的な強みを持っています！
やり方
動画風のhtml+css+jsを書くときに気をつけること
重要なことから順に紹介していきます。
高さを固定する
動画ファイルは高さが変わることは、滅多にありませんよね？だからあなたが書くファイルも高さが変わらないようにしてください！
というのは建前で、これらの動画風ファイルはiFrameを使って読み込ませています。私の知る限りでは、ブラウザは横の長さの計算は非常にすんなりとやってくれますが、縦の長さはちょくちょく計算がバグります。(例えばCSSの縦書きは、えらいことになる）
ですから、最初から高さを固定して、ユーザー側からも高さを指定する方法を取るのが最も安全です。
相対パスが使える
同じページにアップロードしたファイルならば相対パスが使えるので覚えておきましょう。 こいつ→"./"です。
htmlの余白を全てなくす
画像フレームによくわからない余白があると不恰好なので、あなたの作るhtmlの時点で余白を全て無くしましょう。具体的には、cssファイルにこれを入れておくのが吉です。
body { padding:0px; margin: 0px; }
スマホでも、パソコンでもまともに見えるようにする
SCP財団をスマホで見る方は多いです！なんとかしましょう！つまり、Flashを使って作るのは無茶ということです。FlashやShockWaveの代わりにHTML 5のCanvas要素の限界を極めるのが良いでしょう。
埋め込み方法のテンプレート
例えば縦横が(300px,300px)ならばこのような感じで、あなたの記事に埋め込みます。
[[div class="scp-image-block" style="width:300px;"]]
[[iframe 動画風作品のURL style="width:300px; height:300px;" frameborder="0" scrolling="no"]]
[[div class="scp-image-caption" style="width:300px;"]]
キャプション
[[/div]]
[[/div]]参考になるものの見つけ方
ライセンスには気をつけよう
あなたが使う動画風のものも、CC-BY-SA 3.0とフレンドリーなライセンスで公開しなければなりません。動画風の内部の画像は、CC-BY-SA 3.0に対応するものを使うべきです。
ですからcssやjsファイルに使うコードも、商用不可能なものや、改変不可能なものを使ってはならないです。
つまり画像などのリソースはCC-BY-SA 3.0を使いましょう。そして、コードは無数のライセンス形式がありますが、その中でもMITライセンスが良いのではないでしょうか？もしMITライセンスならアップロードしたファイルの中に、直接MITライセンスの著作権表示および許諾表示を書いて、フォーラムでもMITライセンスを使っていることを説明すると良いでしょう。
CodePenが便利
CodePenはパブリック公開されている作品のライセンスが、MITライセンスです。
https://blog.codepen.io/legal/licensing/
例えば今回の例は、CodePenの Lucas Bebber氏のbase64 glitch anim + CSS CRT effectを参考に作りました。
CodePenは見ていて楽しいサイトなのでオススメですよ。
おまけ
今回の例のソースコード
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.html
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.css
http://scp-jp-sandbox2.wdfiles.com/local--files/nanimono-demonai/RedMars.js
a.k.a. 鬼食料理長