ホームページ制作WORKS制作実績BLOGブログRECRUIT採用情報COMPANY会社概要CONTACTお問い合わせ03-6659-5220WordPress・レスポンシブが得意!ホームページ制作BLOGDropboxにアップロードされた動画をwebサイトに埋め込む方法(.mp4)Dropboxにアップロードされた動画をwebサイトに埋め込む方法(.mp4)2016/12/13ツイート今年の4月に入社を致しました。この八か月弱で勉強させていただいたことはとても多く、何を記事にしようか悩んだのですがその中でも参考サイトが少なかったものを、覚書も兼ねて書きたいと思います。Dropboxにアップロードされた動画を埋め込む方法とある案件でDropboxにアップロードされた動画をサイトに埋め込む必要がありました。そもそもDropboxを使用したことがなく、埋め込みコードとか書き出せるのかなど検索。youtube等々に比べ情報が少ないながら、埋め込み用のコードについては意外とあっさりヒットしました。削除HTMLタグURLを作成できたので、youtubeと同じくiframeタグで動画を読み込ませようとしました。src="https://dl.dropboxusercontent.com/~.mp4"></iframe>こうしてみました。Edgeの各最新でなら(outpleyになってしまっていることを許容とすれば)とりあえず表示はできました。簡単に検証した結果が以下になります。・iOS7、iOS8は読み込める(今月の南本さんの記事にもありますが、)制作において大事なのは対応ブラウザを気にすること。ここから調べるのに結構時間がかかってしまいました...。他の動画を読み込むタグを調べた方が早そうだと、調べたところHTML5から導入された「video」タグなら先ほど表示されなかったIE9以上とAndroid4系で表示されるのを確認できました。最終的にたどり着いた記述が以下になります。src="https://dl.dropboxusercontent.com/~.mp4"></video>最後に使用できる属性についてはこちらのサイトを参考にさせていただきました。指定が必要と思われますが、それを抜いても優秀なタグでありそうです。まわりは時間のかかる作業のひとつです。Webサイトの表示速度を上げられるよう、スクロールをしたタイミングで画像を読み込む「画像の遅延表示」ができるJavaScriptはいくつかあると思います。[...]コスパ最強のプラン、はじまります。今回、東京の中小企業様限定で『コスパ最強のプラン』を新しく作りました。デザインされたフォームを設置したいとき、select要素(プルダウン・セレクトボックス)の装飾はcssだけではなかなかうまくいきません。ランディングページ新規構築リキッドレイアウトは誰でもできる!!コーディングのコツまとめましたもう悩まない。