7-rows edit

video-feature  edit

single video callout-style row

test 3

{{youtube:large:center|MazeKqfCIn0}}

shortcode test with section wrapper

test 3

{{youtube:large:center|1UsXhX37wzQ}}

Rerum eligendi velit aperiam reiciendis similique magnam distinctio

Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem adipisci repudiandae excepturi repellat ut et quas laboriosam aliquid nam.

Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.

More info
Copy
Edit
<!-- components/7-rows/video-feature.php --> <div class="wm-row VideoRow h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title VideoRow__title sr-only">test 3</h3> <div class="VideoRow__video"> <span class="js-wm-shortcode">{{youtube:large:center|MazeKqfCIn0}}</span> </div> </div> </div> <section class="page-theme-wrapper h-theme-silver"> <h3>shortcode test with section wrapper</h3> <div class="wm-row VideoRow h-theme-$row_theme"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title VideoRow__title sr-only">test 3</h3> <div class="VideoRow__video"> <span class="js-wm-shortcode">{{youtube:large:center|1UsXhX37wzQ}}</span> </div> </div> </div> </section> <hr> <section class="page-theme-wrapper h-theme-inherit"> <div class="wm-row VideoRow h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title VideoRow__title">Rerum eligendi velit aperiam reiciendis similique magnam distinctio</h3> <div class="wm-row__intro-text VideoRow__intro-text"> <p>Labore dolorem accusamus odio sint voluptates voluptates dolor adipisci et cum nihil. In doloribus cum at dolorem aliquid distinctio voluptates fuga deleniti quidem ad quibusdam ea. Exercitationem <a href="">adipisci repudiandae</a> excepturi repellat ut et quas laboriosam aliquid nam.</p> <p>Rerum eligendi velit aperiam reiciendis similique magnam distinctio ducimus provident molestiae ad nobis. Dolor atque molestiae at numquam numquam voluptatem officia odio odio aut. Minus magnam et numquam ea non consequuntur ut quod culpa sint corporis aliquam.</p> </div> <div class="VideoRow__video"> <figure class="yt-center figure-lg"> <div class="yt-lg"> <iframe id="ytplayer_693_388_FNxLkpPTQug" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="693" height="388" src="https://www.youtube.com/embed/FNxLkpPTQug?autohide=1&amp;showinfo=0&amp;rel=0&amp;wmode=transparent&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fwww.wm.edu&amp;widgetid=1"></iframe> </div> </figure> </div> </div> <a class="wm-row__moreButton VideoRow__moreButton" href="" target="_self">More info</a> </div> </section> <script src="<?php echo $base_url; ?>/js/wm-shortcodes-js.js" type="text/javascript"> </script>
Copy
Copy
Edit
/* scss/7-rows/_video-feature.scss */ // row-specific overrides .VideoRow { &__video { figure.figure-lg { width: 100%; max-width: 920px !important; } figcaption { display: none; } .yt-lg { position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; } .yt-lg iframe, .yt-lg object, .yt-lg embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure[class*="yt-"] { margin-bottom: 0; } // only apply at wider sizes @include breakpoint($youtube-breakpoint) { figure.yt-center { margin-right: auto !important; margin-left: auto !important; } } // PRINT styles @media print { figure.yt-center { margin-right: auto !important; margin-left: auto !important; } .yt-lg { border: 1px solid #c9c9c9 !important; background-color: #c9c9c9 !important; } } } }