#5 【教えて!!!】電子書籍にYouTubeの動画を埋め込みたかった
小説に音楽を添えよう
自作の小説には劇中歌の紹介やBGM用にYouTubeのプレイリストを添えています。
※ 著作権を考慮し、本人や公式動画を選んでいます
noteではYouTubeリンクがデフォルトでできるから便利ですよね。こんな感じになっています。
これがまあ評判が良いし、自分でもノリノリで執筆できるので結構気に入っています。
今回は、電子書籍出版に向けて、kindle本でもできないかなーと思ってやってみました。
→ しかし、結果できないことがわかったので、失敗談になります。
→ 別の方法があるかもなのでご存知の方は教えて下さいませ。m(_ _)m
HTMLとStyleSheetで実現
電子書籍と言っても基本はHTMLなので、いろいろやってみます。
まずはYouTubeから埋め込みURLを取得してみる。
iframeタグ が取得できるので、埋め込みたいところにペースト。
<iframe width="560" height="315" src="https://www.youtube.com/embed/hUGFk_0U614" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>ぱっと見はいい感じになりましたが、、、
スマホサイズにするとはみ出します。（横幅が固定のため）
というわけで、ここらへんのサイトを参考に（というかそのまま）スタイルシートを設定する
https://design.webclips.jp/youtube-movie-size/
StyleSheet(.css)
/* YouTubeの埋め込み動画対応 */
.youtube-wrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}
.youtube-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}HTMLには上記で設定したclassをdivで囲んであげます。
<div class="youtube-wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hUGFk_0U614" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>いい感じになりました。↓
そのままkindle形式にするとうまく行かなかった
その流れでEPUBを作って、Amazonのキンドル・ダイレクト・パブリッシング(KDP)に登録していまいます。
EPUBへの変換はでんでんコンバーターを利用します。
流れ的にはこうですね。
MarkDown(.md) + StyleSheet(.css) + 表紙などの画像
↓
でんでんコンバーター
↓
EPUB(.epub)
↓
キンドル・ダイレクト・パブリッシング(KDP)
ここらへんの作業はもう慣れました。
思えば初めて電子書籍をKDPに登録したときは、ドキドキで不安がいっぱいでしたが、経験って大事です。
そのままポチッと登録して、プレビューチェックをしたところ、設定した埋め込みYouTubeが無効化されていました。
なんでや！と思って色々調べてみましたが、正確なことはわからず。まあ確かかに、セキュリティや著作権の問題を考慮してkindle側で無効にしているのでしょうね。
他のソフトで試した感じではこうなります。
* でんでんコンバーターのプレビュー → 表示される
* iBooks → 無効
* Kindle Previewer → 無効
* bibi → 表示されるらしい（未検証）
というわけで、埋め込み動画は諦めて、KDPに登録してきます。
それと、bibiという面白そうなEPUBリーダも見つけたので、今度はそれを試してみようかな。
今回は以上です。