質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

Q&A

1回答

1575閲覧

html,cssにてyoutube動画を自動再生させたい

shirout

総合スコア36

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube

YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

0グッド

0クリップ

投稿2020/01/26 08:13

編集2022/01/12 10:55

ブラウザを開いた時に埋め込んだyoutube動画を自動再生させたいと考えています
以下コードになります。よろしくお願いします。

haml
.video
%iframe{:allow => "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", :allowfullscreen => "", :frameborder => "0", :height => "340", :src => "https://www.youtube.com/embed/kqB7Et2qpuc?start=540", :width => "560"}

scss
.video {
background-image: url(../images/ファイル.jpg);  
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100% auto;
}

それとscssのファイルイメージは背景のつもりですが全く表示されません
こちらはついで程度でいいので分かる方よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/01/26 08:20 編集

hamlを質問タグに追加してください。 そして、hamlを展開したhtmlも記載していただかないと、回答かなり得ずらいと思います。 (回答者にhamlの環境を作らせることになるので、回答する人が限定される=回答が非常に得ずらい) scssも同様です。 CSSにビルドしたコードも載せた方がいいかと。
miyabi_takatsuk

2020/01/26 09:15

展開後のhtmlも記載してください。 でないと、回答、誰もできないと思いますよ・・・。 あと、コードはコードブロックを使って記載してください。 <code>ボタンを押すと必要な文字列が挿入されます。
guest

回答1

0

自動再生されない

src属性のURLをhttps://www.youtube.com/embed/kqB7Et2qpuc?start=540&autoplay=1のように、末尾に&autoplay=1を加えると自動再生されました。

画像が表示されない

widthheight属性がないのが原因です。
max-widthなども使って、大きさを定義してください。
また、以下の定義によって画像がうまく表示されない可能性がある(手元ではbackground-attachmentが原因で一色になってしまった)ので、うまく表示されないときは以下の定義は外してみてください。

background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100% auto;

投稿2020/02/03 09:40

programming

総合スコア476

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問