Merced Component Library

Full Media 

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

        <picture class="full_media_picture">
            <source media="(min-width: 1200px)" srcset="https://images.fastspot.com/merced/1440x810/">
            <source media="(min-width: 980px)" srcset="https://images.fastspot.com/merced/1220x686/">
            <source media="(min-width: 740px)" srcset="https://images.fastspot.com/merced/980x552/">
            <img class="full_media_image" src="//images.fastspot.com/merced/735x980/" alt="" loading="eager" width="735" height="980">
        </picture>
    </figure>
    <div class="js-background-video-wrapper full_media_video" data-background-video='{"autoplay":true,"display":"background","id":"AjEwsxtp-yg","type":"youtube","title":"video","playerVars":{"loop":1}}'>
        <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">

                                <button class="full_media_video_play_button js-full-media-video-play-button">
                                    <span class="full_media_video_play_button_inner">
                                        <span class="full_media_video_play_button_label">Play Video</span>
                                        <span class="full_media_video_play_button_icon" aria-hidden="true"><span class="full_media_video_play_button_icon_inner">
                                                <i class="fa-regular fa-play"></i>
                                            </span>
                                        </span>
                                </button>
                            </div>
                            <div class="full_media_video_control">

                                <button class="full_media_video_pause_button js-full-media-video-pause-button">
                                    <span class="full_media_video_pause_button_inner">
                                        <span class="full_media_video_pause_button_label">Pause Video</span>
                                        <span class="full_media_video_pause_button_icon" aria-hidden="true"><span class="full_media_video_pause_button_icon_inner">
                                                <i class="fa-regular fa-pause"></i>
                                            </span>
                                        </span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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.