バージョン選択

フォーラム

メニュー

オンライン状況

93 人のユーザが現在オンラインです。 (71 人のユーザが フォーラム を参照しています。)
登録ユーザ: 2
ゲスト: 91
uselouw beachhotel もっと...

サイト内検索

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

フロント機能

新規スレッドを追加する

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

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

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


----------------
EC-CUBE3系4系 カスタマイズ ECのプロがシステム特急案件承ります。
公式インテグレートパートナー エンジニア募集中U-Mebius

qchs
投稿日時: 2016/8/21 22:57
対応状況: −−−
半人前
登録日: 2016/5/4
居住地:
投稿: 16
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
居住地:
投稿: 16
Re: youtube 動画をレスポンシブに
すみません、自己解決というか...
単なるケアレスミスでした。
コピペした内容の " が一部全角になっていました。
お騒がせ致しました。
ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

ec-cube.co

統計情報

総メンバー数は52,415名です
総投稿数は93,794件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
nanasess
2008
4
468
1873
5
yuh
1610
6
red
1359
7
umebius
1341
8
h_tanaka
930
9
fukap
907
10
tsuji
856
11
shutta
835
12 ramrun 789
13
tao_s
780
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 437


ネットショップの壺

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

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