common/app/views/fragments/items/facia_cards/contentCard.scala.html [101:185]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @item.displayElement.filter(const(item.showDisplayElement)) match {
            case Some(InlineVideo(videoElement, title, fallback)) if item.cardTypes.showVideoPlayer => {
                @defining(VideoPlayer(
                    videoElement,
                    Video640,
                    title,
                    autoPlay = false,
                    showControlsAtStart = false,
                    overrideIsRatioHd = Some(false),
                    // We only pass in the ID if this is a video or audio block, as if it's a mainMedia video, the
                    // ID is actually pointing to the article, which is wrong. It would be nice to have the ID on the
                    // ContentCard, but we don't for now. Annoyingly this doesn't allow us to check for if we should
                    // play ads or if the video is expired, but as fronts change really often, this is a non-problem.
                    embedPath = if (item.isMediaLink) item.id else None,
                    path = if (item.isMediaLink) item.id else None
                )) { player =>
                    <div class="fc-item__media-wrapper fc-item__video u-faux-block-link__promote media__container--hidden js-video-player">
                        <div class="fc-item__video-container">
                            @video(player, false, item.cardTypes.showVideoEndSlate, showPoster = false)
                        </div>
                    </div>
                @fallback.map { fallbackImage =>
                    <div class="fc-item__video fc-item__video-fallback media__placeholder--active js-video-placeholder gu-media__fallback">
                        <div data-link-name="video-play-button-overlay" class="@RenderClasses("fc-item__video-play", "media__placeholder--hidden", "vjs-big-play-button", "js-video-play-button")"><span class="vjs-control-text">@fragments.inlineSvg("play", "icon")</span></div>
                        @itemImage(
                            fallbackImage.imageMedia,
                            inlineImage = containerIndex == 0 && index < 4,
                            widthsByBreakpoint = Some(item.mediaWidthsByBreakpoint),
                            shouldLazyLoad = containerIndex > 2
                        )
                    </div>
                }
                }
            }

            case Some(svg@CrosswordSvg(_)) => {
                <div class="fc-item__media-wrapper">
                    <div class="fc-item__image-container u-responsive-ratio inlined-image">
                        <img class="responsive-img" src="@svg.imageUrl" data-crossword-id="@svg.persistenceId" alt="">
                    </div>
                </div>
            }

            case Some(media@InlineYouTubeMediaAtom(_,_)) => {
                <div class="fc-item__media-wrapper">
                    <div class="fc-item__video-container">
                    @youtube(
                        media = media.youTubeAtom,
                        displayCaption = false,
                        displayDuration = false,
                        playable = item.cardTypes.showYouTubeMediaAtomPlayer,
                        posterImageOverride = media.posterImageOverride,
                        cardStyle = Some(item.cardStyle))
                    </div>
                </div>
            }

            case Some(InlineVideo(_, _, Some(fallbackImage))) => {
                <div class="fc-item__media-wrapper">
                    @itemImage(
                        fallbackImage.imageMedia,
                        inlineImage = containerIndex == 0 && index < 4,
                        widthsByBreakpoint = Some(item.mediaWidthsByBreakpoint),
                        shouldLazyLoad = containerIndex > 2
                    )
                </div>
            }

            case Some(InlineImage(images)) => {
                <div class="fc-item__media-wrapper">
                    @item.starRating.map { rating =>
                        @starRating(rating)
                    }
                    @itemImage(
                        images,
                        inlineImage = containerIndex == 0 && index < 4,
                        widthsByBreakpoint = Some(item.mediaWidthsByBreakpoint),
                        shouldLazyLoad = containerIndex > 2
                    )
                </div>
            }

            case Some(InlineSlideshow(imageElements)) => {
                    @defining(imageElements.take(10)) { slides =>
                    <div class="fc-item__media-wrapper">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



common/app/views/fragments/items/facia_cards/dynamoContentCard.scala.html [106:190]:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        @item.displayElement.filter(const(item.showDisplayElement)) match {
            case Some(InlineVideo(videoElement, title, fallback)) if item.cardTypes.showVideoPlayer => {
                @defining(VideoPlayer(
                    videoElement,
                    Video640,
                    title,
                    autoPlay = false,
                    showControlsAtStart = false,
                    overrideIsRatioHd = Some(false),
                    // We only pass in the ID if this is a video or audio block, as if it's a mainMedia video, the
                    // ID is actually pointing to the article, which is wrong. It would be nice to have the ID on the
                    // ContentCard, but we don't for now. Annoyingly this doesn't allow us to check for if we should
                    // play ads or if the video is expired, but as fronts change really often, this is a non-problem.
                    embedPath = if (item.isMediaLink) item.id else None,
                    path = if (item.isMediaLink) item.id else None
                )) { player =>
                    <div class="fc-item__media-wrapper fc-item__video u-faux-block-link__promote media__container--hidden js-video-player">
                        <div class="fc-item__video-container">
                            @video(player, false, item.cardTypes.showVideoEndSlate, showPoster = false)
                        </div>
                    </div>
                @fallback.map { fallbackImage =>
                    <div class="fc-item__video fc-item__video-fallback media__placeholder--active js-video-placeholder gu-media__fallback">
                        <div data-link-name="video-play-button-overlay" class="@RenderClasses("fc-item__video-play", "media__placeholder--hidden", "vjs-big-play-button", "js-video-play-button")"><span class="vjs-control-text">@fragments.inlineSvg("play", "icon")</span></div>
                        @itemImage(
                            fallbackImage.imageMedia,
                            inlineImage = containerIndex == 0 && index < 4,
                            widthsByBreakpoint = Some(item.mediaWidthsByBreakpoint),
                            shouldLazyLoad = containerIndex > 2
                        )
                    </div>
                }
                }
            }

            case Some(svg@CrosswordSvg(_)) => {
                <div class="fc-item__media-wrapper">
                    <div class="fc-item__image-container u-responsive-ratio inlined-image">
                        <img class="responsive-img" src="@svg.imageUrl" data-crossword-id="@svg.persistenceId" alt="">
                    </div>
                </div>
            }

            case Some(media@InlineYouTubeMediaAtom(_,_)) => {
                <div class="fc-item__media-wrapper">
                    <div class="fc-item__video-container">
                    @youtube(
                        media = media.youTubeAtom,
                        displayCaption = false,
                        displayDuration = false,
                        playable = item.cardTypes.showYouTubeMediaAtomPlayer,
                        posterImageOverride = media.posterImageOverride,
                        cardStyle = Some(item.cardStyle))
                    </div>
                </div>
            }

            case Some(InlineVideo(_, _, Some(fallbackImage))) => {
                <div class="fc-item__media-wrapper">
                    @itemImage(
                        fallbackImage.imageMedia,
                        inlineImage = containerIndex == 0 && index < 4,
                        widthsByBreakpoint = Some(item.mediaWidthsByBreakpoint),
                        shouldLazyLoad = containerIndex > 2
                    )
                </div>
            }

            case Some(InlineImage(images)) => {
                <div class="fc-item__media-wrapper">
                    @item.starRating.map { rating =>
                        @starRating(rating)
                    }
                    @itemImage(
                        images,
                        inlineImage = containerIndex == 0 && index < 4,
                        widthsByBreakpoint = Some(item.mediaWidthsByBreakpoint),
                        shouldLazyLoad = containerIndex > 2
                    )
                </div>
            }

            case Some(InlineSlideshow(imageElements)) => {
                @defining(imageElements.take(10)) { slides =>
                    <div class="fc-item__media-wrapper">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -