FlexSlider2

FlexSlider2　動画「Youtube」を追加

2015年8月1日

Categories | ホームページ YouTube

取りあえず実装し、今の所問題なく表示されていますが、

前回より若干スタイルシート（CSS）をカスタマイズし、

今度は「FlexSlider2」にyoutube（動画）を表示させて見ました。

サンプル：https://www.hcz.jp/spec.html

0801 01 400x300 FlexSlider2　動画「Youtube」を追加

 

■ オプション設定

<script>
$(document).ready(function() {
   $('#right-menu').sidr({
			name: 'right-sidr',
			side: 'right',
			source: '#navigation'
    });
　　$(window).touchwipe({
      wipeRight: function() {
        $.sidr('close', 'sidr-main');
      },
      wipeLeft: function() {
        $.sidr('open', 'sidr-main');
      },
      preventDefaultEvents: false
    });
});
</script>

 

Youtube側で、共有の「埋め込みコード」を ホームページ内のFlexSlider2にコピペ。

動画のサイズはカスタムサイズで任意。検証するとPCでは問題なく表示されるが、

スマホ（レスポンシブ）で見ると問題あり。

0801 02 229x400 FlexSlider2　動画「Youtube」を追加

「FlexSlider2」は動画は実装できるが、レスポンシブには対応してないようだ。

試しにYoutubeの「埋め込みコード」を、サイズなしにしてみた。

 

例

<iframe src="https://www.youtube.com/embed/××××?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

 

0801 03 400x300 FlexSlider2　動画「Youtube」を追加

今度はＰＣ側で思うようなサイズで表示されなくなる。

でぇ、対処法としてスタイルシート（css）で動画をレスポンシブさせることにしました。

 

<style>
iframe{
	width:100%;
	height:360px;
	border:0;
}
</style>

 

上記を記述することで、レスポンシブにも対応できるようになります。

※ heightの数値指定は、「100％」や「auto」は無視されるので、

明確な値（●●px）を記述するように。それから、ドキュメントタイプが「HTML5」の場合、

Youtubeの「埋め込みコード」には、不必要なタグがあるので削除しておきましょう。

 

例

<iframe src="https://www.youtube-nocookie.com/embed/××××?rel=0" title="YouTube">YouTube</iframe>

 

しまい

Comment(0) | Trackback(0)

TAGS: / / / / | 2015年8月1日 |

FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正

2015年7月20日

Categories | ホームページ

当サイトに「FlexSlider2」を導入してみたが、戻る[Previo]・進む[Next]ボタンの

下のテキスト文字だけを消したかったので、ファイルをいじって修正しました。

FlexSlider2 400x253 FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正

本家サイト：http://flexslider.woothemes.com/

バージョン：FlexSlider 2  v2.5.0

デモファイル：thumbnail-slider.html

使用ファイル：　jquery.flexslider-min.js　/　flexslider.css　/　fontsフォルダ

※ 「jquery.js」は他の兼ね合い（sidr）もあり「v2.1.1」を利用。

 

修正前（デフォルト）

20 01 400x246 FlexSlider2 戻るボタン「Prev」・進むボタン「Next」修正

修正はまず「jquery.flexslider-min.js」内の「Previo」と「Next」を検索し削除。

次に「flexslider.css」内を修正。

 

 

117行目から修正と追加

 

  width: 40px;
  height: 40px;

 

↓

 

  width: 46px;
  height: 30px;
  padding-top:16px;

 

 

145～151行内の148行と152行を修正

 

.flex-direction-nav .flex-prev {
  left: -50px;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}

 

↓

 

.flex-direction-nav .flex-prev {
  left: -50px;
  text-align:center;
}
.flex-direction-nav .flex-next {
  right: -50px;
  text-align: center;
}

 

※ あくまでも当サイト仕様なので、変更したサイズ「px」は各自微調整が必要です。

サンプルページ：https://www.hcz.jp/spec.html

Comment(0) | Trackback(1)

TAGS: / / / / / / | 2015年7月20日 |