動画の上に画像リンク、でも無理くりのカスタマイズ
youtubeの動画をご覧になった際、どこか隅に小さな画像リンクが配置される趣向
見たことないですか?
邪魔と思いながらもマウスを充てるとリンク移動....
でも
ここでご案内する手法は、シリウスで作るページだけで反映するもので
youtubeサイトにアップする動画のカスタマイズではありません
シリウスで作るページだけで反映されるもの...
読者を誘導したいときにご利用ください
テキストでもOKです
ここまで来て大変申し訳ないのですが、お詫びがございます
ここでのカスタマイズを施しても、youtube動画はスマホサイズに自動調整されません
できる限りは、スマホサイズでも枠をはみ出さない動画サイズにしてください
以降、スタイルシートで調整できるよう努力してみますので、後ほど追加情報は
記載します
取り付け例 右下の森林画像
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
作り方は簡単 スタイルシートは必要なし
HTMLコードだけ
上記動画記述は以下
<div style="height:130px;">
<iframe width="420" height="315" src="https://www.youtube.com/embed/cSCglVnYb08" frameborder="0" allowfullscreen></iframe>
</div>
<div align="right">
<span style="color:transparent">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span><img src="<% pageDepth %>img/a1380_001165.jpg" style="width:100px;" alt="" />
</div>
仕様を確認してください
<div style="height:130px;"> 数値変更で高さを変えられえます
埋め込みコード
</div>
<div align="right">
<span style="color:transparent">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>ここに画像コードを置きます
</div>
画像コード前に一記載が、配置しておりますが、CSS指定しないので
横からの位置を図る手段として文字を配列し、透明カラーコードで見えなくしてます
<span style="color:transparent">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>ここに画像コードを置きます
ですので、横位置調整は文字を減らすか、増やすかで調整してください
youtube動画の片隅に画像リンクを配置してみる
youtube動画へのカスタマイズ導入まとめ
トップページ
関連ページ
- youtube動画をレスポンシブテンプレートに合わせて自動縮小
- シリウスのレスポンシブテンプレートで、youtube動画を設置してもスマートフォンではサイズが縮小しませんので、作用するようCSS指定しましょう
- youtube動画上に閉じるボタン付きバナー取り付け方法
- シリウスレに設営したyoutube動画内にバナー、画像リンクを組み込んでみるというもの、お邪魔なら閉じるボタンで消し去ることもできるという閲覧者サービスの作用設定方法