TOP

動画の上に画像リンク、でも無理くりのカスタマイズ

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動画内にバナー、画像リンクを組み込んでみるというもの、お邪魔なら閉じるボタンで消し去ることもできるという閲覧者サービスの作用設定方法