動画埋め込み

youtube 【j-video】

<div class="n j-video ">

■動画設置のクラス名
 j-video

 

<div class="cc-m-video-gutter cc-m-video-align-left cc-m-video-ratio-2" style="width: 425px;">

■動画を囲むクラス名
  cc-m-video-gutter
  cc-m-video-align-left
  cc-m-video-ratio-2
 


<div class="cc-m-video-wrapper">

■動画ラッパーのクラス名
 cc-m-video-wrapper

<iframe class="cc-m-video-container" src="youtubeの共有URL" frameborder="0" allowfullscreen="true">

</iframe>

■動画を読み込むためのiframeのクラス名

 cc-m-video-container
<div class="cc-m-video-overlay"></div>

■用意されている動画が始まる前のオーバーレイ画像(プレイマーク)のクラス

 cc-m-video-overlay

</div>

</div>

<div class="cc-clear"></div>

 

<script id="cc-m-reg-12263165592">

// <![CDATA[

window.regModule("module_video", {"variant":"default","id":12263165592,"maxwidth":1920,"maxheight":1200,"minwidth":100,"minheight":100,"useContentSize":0,"isVideoValid":true,"align":"left","height":"239","width":"425","ratioIndex":2});

// ]]>

</script>

</div>

.cc-m-video-align-left {

    float: left;

}

.cc-m-video-gutter {

    position: absolute;

    left: 0;

    top: 0;

    max-width: 100%;

    height: auto !important;

?   position: relative;

}

.cc-m-video-ratio-2 .cc-m-video-wrapper {

    padding-bottom: 56.25%;

}


.cc-m-video-wrapper
{

    height: 0 !important;

    position: relative;

}

.cc-m-video-container {

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    overflow: hidden;

}

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422