バージョン選択

フォーラム

メニュー

オンライン状況

41 人のユーザが現在オンラインです。 (30 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 40
eceze8866 もっと...

サイト内検索

 > フロント機能 > youtube 動画をレスポンシブに

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
qchs
投稿日時: 2016/8/20 3:12
対応状況: −−−
半人前
登録日: 2016/5/4
居住地:
投稿: 18
youtube 動画をレスポンシブに
ECCUBE3.0.9を利用させて頂いております。
トップページにyoutubeの動画を埋め込んでみたものの
PCでは大丈夫でもそのままではレスポンシブに対応しないためスマホでは非常に見づらい結果となります。
今後のECCUBEのアップデートも踏まえあまりカスタマイズはせずに対応できるものならさせたいと思うのですが、解決策はございますでしょうか?
umebius
投稿日時: 2016/8/20 21:12
対応状況: 確認中
登録日: 2016/7/22
居住地:
投稿: 2085
Re: youtube 動画をレスポンシブに
どういう方法で埋め込まれたのか分かりませんが、youtubeのレスポンシブ化はCSSでできますので、一緒にstylesheetを埋め込めませんか?<style>...</style>

またはトップページから読み込んでいるCSSに書くかですね。

参考 https://h2ham.net/youtube-responsive


----------------
EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。

2系・3系から4系へのバージョンアップ実績豊富

qchs
投稿日時: 2016/8/21 22:57
対応状況: −−−
半人前
登録日: 2016/5/4
居住地:
投稿: 18
Re: youtube 動画をレスポンシブに

早速のご回答ありがとうございます。
私は標準のテンプレートを利用しておりますので
早速試しに
default.css

.video {
position: relative;
height: 0;
padding: 30px 0 56.25%;
overflow: hidden;
}

.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
を追加し

動画埋め込み先に
<div class=”video”>
埋め込みコード
</div>

としたのですが
ダメでした。

何か気をつけるべきところはございますでしょうか?
どうぞ宜しくお願いします。
qchs
投稿日時: 2016/8/23 0:01
対応状況: 解決済
半人前
登録日: 2016/5/4
居住地:
投稿: 18
Re: youtube 動画をレスポンシブに
すみません、自己解決というか...
単なるケアレスミスでした。
コピペした内容の " が一部全角になっていました。
お騒がせ致しました。
ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,680名です
総投稿数は109,930件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2311
5
umebius
2085
6
yuh
1819
7
h_tanaka
1638
8
red
1569
9
mcontact
1279
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.