Merced Component Library

Full Media: Image 

<div class="full_media full_media_no_video">
    <figure class="full_media_figure">

        <picture class="full_media_picture">
            <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/merced/1440x810/1">
            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/merced/1220x686/1">
            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/merced/980x552/1">
            <img class="full_media_image" src="//images.fastspot.com/merced/735x980/1" alt="" loading="eager" width="735" height="980">
        </picture>
    </figure>
</div>
 
<div class="full_media{% if video %} full_media_has_video{% else %} full_media_no_video{% endif %}">
  <figure class="full_media_figure">
    {% include "@component-picture" with {
        class: 'full_media',
        alt: '',
        image: image,
        loading: 'eager',
        default: img.portraitFull.med,
        sources: {
          "1200px": img.wide.xlrg,
          "980px": img.wide.lrg,
          "740px": img.wide.med
        }
      } %}
  </figure>
  {% if video %}
    {% set video_options = {
      autoplay: true,
      display: "background",
      id: video,
      type: "youtube",
      title: "video",
      playerVars: {
        loop: 1
      }
    } %}
    <div class="js-background-video-wrapper full_media_video" data-background-video='{{ video_options|json_encode }}'>
      <div class="full_media_iframe_wrapper">
        <div class="js-iframe-target full_media_iframe"></div>
      </div>
      <div class="full_media_video_controls">
        <div class="fs-row">
          <div class="fs-cell">
            <div class="full_media_video_controls_inner">
              <div class="full_media_video_controls_bubble">
                <div class="full_media_video_control">
                  {% render '@component-button' with {
                    class: 'full_media_video_play',
                    title: 'Play Video',
                    icon: 'fa-play',
                    js: true
                  } %}
                </div>
                <div class="full_media_video_control">
                  {% render "@component-button" with {
                    class: 'full_media_video_pause',
                    title: 'Pause Video',
                    icon: 'fa-pause',
                    js: true
                  } %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>

No notes defined.