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
    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>

当ブログ内の記事検索

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

Archive

Mobile

qrcode

Selected Entry

Comment

  • 神奈川新聞の記者の田崎 基さんのツイート「安保法整備しても環境は悪化している」に( ゚Д゚)_σ異議あり!!
    メタキャット
  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
    アルマジロ
  • 買って損した100均グッズ
    村雨
  • 加計学園の銚子の千葉科学大学についてフェイクニュースが目に余るのでとりあえず事実を詳しく整理してみました
    山路 敬介(宮古)
  • 【謎の民進ブーメラン?】玉木雄一郎さんが提案した革新的な獣医学部ができるのに、なぜか玉木さんが問題視
  • 沖縄タイムスが八重山日報の配達をするなと小売店に圧力、これって独占禁止法違反? 調べてみました
    のらくろ准佐
  • 【森友学園国有地売却問題】衝撃の新事実、森友学園への売却価格は近隣地より5.8倍の高値だった、豊中市の価格は2300万円
    東郷ビール
  • 沖縄タイムスが八重山日報の配達をするなと小売店に圧力、これって独占禁止法違反? 調べてみました
    ボギー大佐
  • 青山繁晴氏、関西テレビ『胸いっぱい』で現職民進党議員(有田芳生氏?)のネットデマ工作を批判
  • 青山繁晴氏、関西テレビ『胸いっぱい』で現職民進党議員(有田芳生氏?)のネットデマ工作を批判
    こんには

Profile

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

Other

Powered

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

スポンサーリンク