Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="c-video-split-block">
  <div class="c-video-split-block__text">
    <h2>Watch the video</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    <ul>
    </ul>
  </div>
  <div class="c-video-split-block__video">
    <div class="c-video">
      <div class="c-video__content">
        <a class="c-video__cover" data-youtube-id="lUI2UWVCQ5s" data-title="Learn newsletter" data-event-category="Community story" data-event-label="Play video" data-event-action="click" role="button" href="https://youtu.be/lUI2UWVCQ5s">
          <img alt="Alt Text" height="400" width="800" srcset="https://i3.ytimg.com/vi/lUI2UWVCQ5s/maxresdefault.jpg 2x" src="https://i3.ytimg.com/vi/lUI2UWVCQ5s/maxresdefault.jpg" />
        </a>  </div>
      <div class="c-video__cta">
        <a class="rpf-button--tertiary rpf-button" data-event-category="Community story" data-event-label="Read transcript" data-event-action="click" href="/videos/test_video_slug">Read transcript</a>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
c(
  'site/video_split_block',
  {
    title:,
    body:,
    image: {
      alt: 'Alt Text',
      height: 400,
      width: 800,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      }
    }
  }
) do |component|
  component.with_video do
    component.render(Site::VideoComponent.new(
                       {
                         title: 'Learn newsletter',
                         copy:
                           'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
                         image: {
                           alt: 'Alt Text',
                           height: 400,
                           width: 800,
                           src: 'https://i3.ytimg.com/vi/lUI2UWVCQ5s/maxresdefault.jpg',
                           srcset: {
                             'https://i3.ytimg.com/vi/lUI2UWVCQ5s/maxresdefault.jpg': '2x'
                           }
                         },
                         slug: 'test_video_slug',
                         youtube_id: 'lUI2UWVCQ5s'
                       }
                     ))
  end
end

No notes provided.

Param Description Input

The title of the video split block

The body of the video split block