"Apple Header Test"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="ember194" class="ember-view"><div class="product-header__wrapper"> <div id="ember195" class="product-header__video__container ember-view"><video muted="" src="blob:https://tv.apple.com/a43ea207-4f76-7643-a3cd-de7e82a40b05" preload="auto" class="product-header__video animate" aria-hidden="false" playsinline=""></video> <div class="product-header__video-control__container animate" data-play-state="paused" data-audio-state="muted" aria-hidden="false"> <button class="product-header__video-control--pause header-button header-button--play" aria-label="Paused"> </button> <button class="product-header__video-control--mute header-button header-button--mute" aria-label="Mute"> </button> <button class="product-header__video-control--fullscreen header-button header-button--fullscreen" aria-label="Paused"> </button> </div> </div> <picture class="product-header__image-bg"> <source srcset="https://is1-ssl.mzstatic.com/image/thumb/VAdfF-KZoHJW5AfaldQIcg/2000x1125sr.jpg" style="linear-gradient(to top, rgba(1,4,15,.8) 20%, rgba(1,4,15,.26) 40%, rgba(1,4,15,0) 60%)" media="(min-width: 740px)"> <img src="https://is3-ssl.mzstatic.com/image/thumb/UFMr2f9ym5AaZEIF7sHnHA/800x1420tc.jpg" class="product-header__image-bg__portrait" alt="The Morning Show"> </picture> <div class="product-header__blur"></div> <div class="product-header__image-logo__blur"></div> <div class="product-header__image-logo__container clr-primary-text-on-dark"> <div class="product-header__image-logo" style="background-image:url(https://is1-ssl.mzstatic.com/image/thumb/XV9aU7xGDz3FssOsc0ITPw/700x140.png);" aria-label="The Morning Show"> <!----> </div> </div> <div class="product-header__main__container clr-primary-text-on-dark"> <div class="product-header__content__container"> <div class="product-header__image-logo__container--xs-view"> <div class="product-header__image-logo" style="background-image:url(https://is1-ssl.mzstatic.com/image/thumb/XV9aU7xGDz3FssOsc0ITPw/700x140.png);" aria-label="The Morning Show"> <!----> </div> </div> <div class="product-header__content__buttons"> <div class="product-header__cta__prefix typ-label-emph"> <span class="clr-secondary-text-on-dark">Apple TV+</span> </div> <div class="coming-soon coming-soon--with-date"> <p class="coming-soon__text typ-footnote-emph clr-secondary-text-on-dark"> COMING </p> <p class="coming-soon__date typ-headline-emph clr-primary-text-on-dark text-truncate">November 1</p> <p class="typ-footnote-emph clr-secondary-text-on-dark coming-soon__xsmall-view">COMING NOVEMBER 1</p> <button class="notify-me-btn notify-me-btn--cta"> Notify me </button> </div> </div> <div class="product-header__content__details"> <div id="ember197" class="product-header__content__details__synopsis typ-subhead ember-view reduced-line-height"> <span class="lt-line-clamp__line">Pull back the curtain on early morning TV. Starring Reese Witherspoon, Jennifer Aniston, and Steve Carell, this unapologetically</span> <span class="lt-line-clamp__line lt-line-clamp__line--last"> candid drama looks at the modern workplace through the lens of the people who help America wake up.<!----></span> <!----><span class="lt-line-clamp__ellipsis lt-line-clamp__ellipsis--dummy">... <a class="lt-line-clamp__more" href="#">MORE</a></span></div> <div class="product-header__content__details__metadata typ-footnote-emph"> <div class="product-header__content__details__metadata--info"> <span>DRAMA</span> <span>2019</span> <!----></div> <!----><!----> <span class="badge badge--rating--us_tv--TV_MA--on-dark" aria-label="TV-MA"> TV-MA </span> <!----><!----><!----><!----><!----><!----><!----> </div> </div> <div class="product-header__content__crews typ-subhead"> <div> <span class="clr-secondary-text-on-dark">Starring</span> <span class="product-header__content__crews__list">Jennifer Aniston, Reese Witherspoon, Steve Carell</span> </div> </div> </div> </div> </div> </div>
.product-header__wrapper {position: relative;margin: auto;max-width: 1680px;height: calc(1680px * 9 / 16);overflow: hidden;} .product-header__video__container {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .animate {opacity: 0;transition: all .5s ease-in-out;} .product-header__video {width: 100%;height: 100%;object-fit: cover;} .product-header__video-control__container {position: absolute;padding: 0 40px;right: 0;bottom: 163px;z-index: 1;} .play-button::after, [data-play-state="paused"] .header-button--play {background-image: url(button_glyphs/product_header_play_white-47c723ff6f4ef334ce5c5304c110910a.png);} .header-button {width: 28px;height: 28px;opacity: 1;background-size: contain;background-color:transparent;border: 1.5px solidrgba(255,255,255,.4);border-radius: 50%;margin-right: 3px;} [type="button"], [type="reset"], [type="submit"], button {-webkit-appearance: button;} button, select {text-transform: none;} button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;} button, hr, input {overflow: visible;} [data-audio-state="muted"] .header-button--mute {background-image: url(button_glyphs/product_header_volume_muted_white-9d2968f4be5a2fe48acfc362ed5d6f07.png);} .header-button--fullscreen {background-image: url(button_glyphs/product_header_fullscreen_white-a63132f7b823a2d8106e71a60cc57f36.png);margin-right: 0;} .product-header__image-bg {margin: auto;position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .product-header, .product-header__blur, .product-header__image-bg {border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;} .product-header__image-bg__portrait {width: 100%;} img {border-style: none;} .product-header__blur {position: absolute;bottom: 0;-webkit-backdrop-filter: blur(10px);width: 100%;height: 100%;-webkit-mask-image: linear-gradient(to bottom,transparent 50%,#000 75%);background: linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.7) 100%);} .product-header__image-logo__blur {position: absolute;top: 0;width: 49.8%;height: calc(49.8% * 9 / 16);opacity: .3;background-image: radial-gradient(at top left,#000 0,rgba(0,0,0,0) 72%);} .product-header__image-logo__container {grid-template-columns: repeat(5,1fr);} .product-header__image-logo__container {position: absolute;left: 0;padding: 0 40px;display: grid;grid-gap: 20px;width: 100%;top: 52px;margin-top: 32px;} .clr-primary-text, .clr-primary-text-on-dark {color: rgba(255,255,255,.9);} .product-header__image-logo {background-position: top left;background-size: contain;background-repeat: no-repeat;width: 150%;padding-bottom: 56.25%;white-space: nowrap;} .product-header__main__container {position: absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: 0 auto;max-width: 1680px;} .product-header__content__container {grid-template-columns: repeat(5,1fr);} .product-header__content__container {width: 100%;display: grid;padding: 0 40px 40px;grid-gap: 20px;} .product-header__image-logo__container--xs-view {display: none;} .product-header__content__buttons {width: calc((1 * ((1680px - 80px - 4 * 20px)/ 5 + 20px)) - 20px);} .product-header__content__buttons {position: relative;} .product-header__cta__prefix {top: -26px;position: absolute;text-align: center;display: flex;width: 100%;} .landing__header__content__heading-line3, .typ-label-emph {font-size: 1.4rem;font-weight: 600;line-height: 1.28;} .product-header__cta__prefix > * {flex: 1;} .clr-secondary-text-on-dark {color: rgba(235,235,245,.6);} .coming-soon--with-date {padding-top: 12px;} .coming-soon {display: flex;flex-direction: column;justify-content: center;border-radius: 6px;padding: 0 12px 12px;min-height: 108px;text-align: center;background-color: rgba(30,30,30,.7);} .coming-soon__text {margin-bottom: 2px;} .coming-soon__date {margin-bottom: 11px;} .text-truncate {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .episode-shelf-header .ember-basic-dropdown .ember-power-select-trigger, .landing__header__content__heading-line2, .typ-headline-emph {font-size: 1.8rem;font-weight: 700;line-height: 1.23;} .coming-soon__xsmall-view {display: none;margin-bottom: 10px;} .notify-me-btn--cta {height: 36px;border-radius: 6px;background-color: #fff;border: none;color:#555;padding: 3px 16px;} .notify-me-btn {font-size: 13px;font-weight: 700;} .preview-product-header__content__details__metadata--info--xs-view, .product-header__content__details__metadata--info--xs-view, .typ-footnote-emph {font-size: 1.1rem;font-weight: 500;line-height: 1.19;} .branding-lockup__content__text, .coming-soon--play-trailer, .notify-me-btn--cta, .typ-subhead-emph {font-size: 1.5rem;font-weight: 600;line-height: 1.47;} .product-header__content__details {grid-column-start: 2;grid-column-end: 5;} .product-header__content__details {position: relative;width: 100%;} .reduced-line-height {line-height: 1.33;} .product-header__content__details__synopsis {margin-bottom: 25px;} .country-selector__header__right .ember-power-select-options, .country-selector__header__right .ember-power-select-trigger, .typ-subhead {font-size: 1.5rem;font-weight: 400;} .lt-line-clamp__ellipsis--dummy {position: fixed;visibility: hidden;top: 0;left: 0;} .product-header__content__details__metadata {position: absolute;bottom: 0;display: flex;align-items: center;white-space: nowrap;} .product-header__content__details__metadata--info {color: rgba(235,235,245,.6);margin-right: 24px;} .product-header__content__details__metadata--info span::after {content: ' · ';} .product-header__content__details__metadata--info span:last-child::after {content: '';} .product-header__content__details__metadata .badge {margin-right: 5px;} .badge--rating--us_tv--TV_MA, .badge--rating--us_tv--TV_MA--on-dark {content: url("https://tv.apple.com/assets/badges/ratings/us_tv/MetadataBadge TV-MA OnDark-ad95b2e3f6a6d6741ad700568277017c.svg");} .badge {display: inline-block;height: 13px;opacity: .6;background-repeat: no-repeat;background-size: 100% 100%;background-position: center;} .product-header__content__details__metadata {white-space: nowrap;} *, .ac-video-controls .main-controls, legend {box-sizing: border-box;} * {margin: 0;padding: 0;} .product-header__content__crews__list {display: inline;} body {font-family: "-apple-system",BlinkMacSystemFont,"-webkit-system-font","Malgun Gothic","Segoe UI","Helvetica Neue",Helvetica,sans-serif;font-synthesis: none;font-feature-settings: 'kern';-moz-font-feature-settings: 'kern';-moz-osx-font-smoothing: grayscale;color: rgba(255,255,255,.9);}

Related: See More


Questions / Comments: