JUGEMテーマ:HTML,XHTML、CSS

 

 

スマホで見ると、動画が画面からはみ出している状態を修正する

 

 

  このブログは、JUGEMブログの有料版JUGEM PLUS を利用しています。

 

 

 

★YouTubeの動画をJUGEMブログに埋め込む方法

 

YouTubeの動画をJUGEMブログに埋め込むには、動画の下の「共有」→「埋め込みコード」をクリックして、

 

 

 

 

このコードをコピーして、JUGEMブログに貼ればいいのですが、ほいほいと動画をブログに貼り付けていたら、ブログ開始数ヶ月目にして、自分のブログは、スマホで見ると、動画が画面からはみ出していることに気が付きました。

 

今まで、パソコンでだけ確認していて、スマホで確認していなかったのです。

 

 

★YouTube動画をスマホに最適化して埋め込む方法

 

以下は、その最適化に成功した方法です。私がやってみた方法なので、これが一番最良なのかはよくわかりませんが、ご紹介します。

 

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen></iframe>

 

これがYouTubeからコピーした私の動画のコードです。

 

これをメモ帳などに貼り、赤文字の位置で改行します。

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen

></iframe>

 

ここに

 

class="movieif_smartphone_resize"

 

というタグを改行した位置に追加します。

 

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen
class="movieif_smartphone_resize"></iframe>

 

 

この書き直したコードをコピーして、ブログに埋め込みます。

 

 

 

これで、スマホでも動画の表示が最適化されました。

 

 

 

※補足

class="movieif_smartphone_resize"

このタグですが、JUGEMブログの独自タグかもしれません。

 

<iframe width="560" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" frameborder="0" allowfullscreen
class="movieif_smartphone_resize"></iframe>

を貼り付けたのですが、

 

実際には

  <iframe allowfullscreen="" class="movieif_smartphone_resize" frameborder="0" height="315" src="https://www.youtube.com/embed/1jFkpnmap8k" width="560">
  </iframe>

と表示されています。

 

 


スポンサーリンク


Comment





   

時計


【お願い】記事等を転載される場合は必ず当ブログのURLを直リンクでご紹介下さい。ページの丸ごとキャプチャー、コピペ転載はお断りします。

かわいいネコのおにぎり


Calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>

当ブログ内の記事検索

1日から使える 通話し放題

Archive

Mobile

qrcode

Selected Entry

Comment

  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
    ぼのぼの
  • ニュース女子検証番組で明らかになったずさんなMBS「沖縄 さまよう木霊」の救急車デマ取材方法
    ツチダ
  • MBS「沖縄 さまよう木霊」、「新沖縄通信」など「ニュース女子」バッシング番組の偏向ぶりがねつ造レベル
    はせこう
  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
    佐藤
  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
  • 「ニュース女子」民進党の本村賢太郎衆院議員が片方の主張だけを採用して一方的に行政指導を促す質問を国会で行い批判集まる
    ボギーてどこん
  • 拡散希望【要注意】一部で流れている東京新聞の1月24日付けアパ「南京大虐殺」記事についてのデマについて
    特定アジアニュース はな
  • MBS「沖縄 さまよう木霊」、「新沖縄通信」など「ニュース女子」バッシング番組の偏向ぶりがねつ造レベル
    ありんくりん
  • 有権者をTwitterブロックする勘違い議員に批判の声高まる。国会議員にブロックする権利はない
    seiichi
  • 蓮舫の顔写真入りキットカット 民進党議員のおやつも税金かな?
    seiichi

Profile

モノを売らないフリーマーケット

Other

Powered

無料ブログ作成サービス JUGEM

スポンサーリンク