6-page-content-elements edit

youtube-embeds edit

YouTube Embed Examples

YouTube Embed

We were pleased to offer live audio and video streaming of the 2019 ceremony here and on William & Mary's Facebook.

YouTube .yt-center.figure-lg .yt-lg

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

YouTube .yt-center.figure-med .yt-med

YouTube Floats

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading

The purpose of COLL 300 is to connect you with people, places, and ideas that take you out of familiar surroundings and deepen the way you see yourself in the world. To introduce you to people and ideas that are outside your sphere of direct experience. To challenge your ways of thinking. To make you a little uncomfortable.

YouTube embed .yt-right.figure-sm .yt-sm

Medium embed

YouTube embed .yt-right.figure-sm .yt-sm

How to Fulfill COLL 300

Typically, COLL 300 happens in your third year. There are many ways to complete COLL 300:

You can experience COLL 300 on campus, through designated courses that address global or cross-cultural issues and are organized around a special series of lectures by W&M faculty, visiting scholars, artists, and public intellectuals.

Students Speak to COLL 300: Student perspectives and presentations at the campus COLL 300 Academic Festival.
Study abroad in a program sponsored by William & Mary and offered through the Reves Center. These all qualify as COLL 300 experiences.
Study away, with an off-campus component that involves encounters with different environments and cultures. These experiences are offered through the Charles Center.
You could take courses through the DC Program that are designated as COLL 300.

Search the Dynamic Schedule for attribute type "College 300" for courses and descriptions.

Other experiences may qualify for COLL 300, including study abroad in a non-W&M program or conducting research abroad. Just make sure ahead of time that your plans qualify for COLL 300.

HTML
Output
SCSS

Expand

Copy

Edit

<h5 id="youtube-examples">YouTube Embed Examples</h5> <a href="#youtube-embed">YouTube embed</a> | <a href="#youtube-floats">YouTube floats</a> <h6 id="youtube-embed">YouTube Embed</h6> <p>We were pleased to offer live audio and video streaming of the 2019 ceremony here and on <a href="https://www.facebook.com/williamandmary/videos/2391954247743919/">William & Mary's Facebook</a>.</p> <p></p> <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&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=1"></iframe> </div> <figcaption>YouTube .yt-center.figure-lg .yt-lg<p></p> </figcaption> </figure> <p></p> <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <?php outputElement("rrssb"); ?> <figure class="yt-center figure-med"> <div class="yt-med"> <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&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=1"></iframe> </div> <figcaption>YouTube .yt-center.figure-med .yt-med<p></p> </figcaption> </figure> <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <hr> <h6 id="youtube-floats">YouTube Floats</h6> <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <figure class="yt-left figure-sm"> <div class="yt-sm"><iframe id="ytplayer_240_200_YeFXv44iqK4" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="240" height="200" src="https://www.youtube.com/embed/YeFXv44iqK4?autohide=1&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=1"></iframe></div> <figcaption></figcaption> </figure> <p></p> <p><a href="">Lorem ipsum dolor</a> 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h6>Heading</h6> <p></p> <figure class="yt-left-nofloat figure-med"> <div class="yt-med"><iframe id="ytplayer_410_230_YeFXv44iqK4" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="410" height="230" src="https://www.youtube.com/embed/YeFXv44iqK4?autohide=1&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=2"></iframe></div> <figcaption></figcaption> </figure> <p></p> <p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <hr> <p>The purpose of COLL 300 is to connect you with people, places, and ideas that take you out of familiar surroundings and deepen the way you see yourself in the world.<span> </span>To introduce you to people and ideas that are outside your sphere of direct experience. To challenge your ways of thinking. To make you a little uncomfortable.</p> <figure class="yt-left figure-sm"> <div class="yt-sm"> <iframe id="ytplayer_240_200_IWo7R5G77fc" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="240" height="200" src="https://www.youtube.com/embed/IWo7R5G77fc?autohide=1&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=1"></iframe> </div> <figcaption>YouTube embed .yt-right.figure-sm .yt-sm</figcaption> </figure> <p></p> <p><a href="">Lorem ipsum dolor</a> 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h6>Medium embed</h6> <figure class="yt-left figure-med"> <div class="yt-med"> <iframe id="ytplayer_240_200_IWo7R5G77fc" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="240" height="200" src="https://www.youtube.com/embed/IWo7R5G77fc?autohide=1&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=1"></iframe> </div> <figcaption>YouTube embed .yt-right.figure-sm .yt-sm</figcaption> </figure> <p></p> <p><a href="https://teams.microsoft.com/dl/launcher/launcher.html?url=%2f_%23%2fl%2fmeetup-join%2f19%3ameeting_ZTczYzIwZjctMGEyYy00YmJlLTg3YjgtZjlmNjgxOTY5YTRi%40thread.v2%2f0%3fcontext%3d%257b%2522Tid%2522%253a%252293b06459-c77d-44b6-af7f-e813cddcdcc3%2522%252c%2522Oid%2522%253a%25224f200ade-1ea4-49ee-9719-06f37c53469d%2522%252c%2522IsBroadcastMeeting%2522%253atrue%257d%26anon%3dtrue&type=meetup-join&deeplinkId=f3f625d5-5dd2-4bed-bf94-1e19837f5525&directDl=true&msLaunch=true&enableMobilePage=true&suppressPrompt=true">Lorem ipsum dolor</a> 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <h6>How to Fulfill COLL 300</h6> <p>Typically, COLL 300 happens in your third year. There are many ways to complete COLL 300:</p> <ul> <li>You can experience <a href="campus-coll-300/index.php">COLL 300 on campus</a>, through designated courses that address global or cross-cultural issues and are organized around a special series of lectures by W&M faculty, visiting scholars, artists, and public intellectuals.<figure class="yt-right figure-sm"> <div class="yt-sm"> <iframe id="ytplayer_240_200_fMRmlhoKjj4" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" title="YouTube video player" width="240" height="200" src="https://www.youtube.com/embed/fMRmlhoKjj4?autohide=1&showinfo=0&rel=0&wmode=transparent&enablejsapi=1&origin=https%3A%2F%2Fwww.wm.edu&widgetid=2"></iframe> </div> <figcaption> Students Speak to COLL 300: Student perspectives and presentations at the campus COLL 300 Academic Festival.</figcaption> </figure> </li> <li><a href="/offices/revescenter/studyabroad/policies/academic/study-abroad--coll-300" rel="noopener noreferrer" target="_blank">Study abroad</a> in a program sponsored by William & Mary and offered through the Reves Center. These all qualify as COLL 300 experiences.</li> <li><a href="../../../charlescenter/studyaway/index.php" rel="noopener noreferrer" target="_blank">Study away</a>, with an off-campus component that involves encounters with different environments and cultures. These experiences are offered through the Charles Center.</li> <li>You could take courses through the <a href="../../../../offices/dccenter/opportunities/index.php" rel="noopener noreferrer" target="_blank">DC Program</a> that are designated as COLL 300.</li> </ul> <p>Search the <a href="../../undergrad_catalog/dynamic-schedule/index.php" rel="noopener noreferrer" target="_blank">Dynamic Schedule</a> for attribute type "College 300" for courses and descriptions.</p> <p>Other experiences may qualify for COLL 300, including study abroad in a non-W&M program or conducting research abroad. Just make sure ahead of time that your plans qualify for COLL 300.</p>

Copy

Edit

/* scss/6-page-content-elements/_youtube-embeds.scss */ .user_content, .user_content_styles { h5, h6 { + .yt_playlist, + *[class*="yt-"] { margin-top: $aside-margin-bottom; } } /*** YouTube Embeds ***/ // <figure> is outermost element, surrounding div with yt- class, then the youtube iframe figure[class*="yt-"] { margin-bottom: $aside-margin-bottom; } figure.figure-sm { width: 100%; max-width: 240px; margin: $aside-margin-bottom auto; } .hasSidebar .yt-med, .hasSidebar figure.figure-med { &[class*="yt-"] { max-width: 100%; } } figure.figure-med { width: 100%; max-width: 410px; &[class*="yt-"] { max-width: 100%; @include breakpoint($mobile-to-desktop-breakpoint) { max-width: 60%; } } } figure.figure-lg { width: 100%; @include breakpoint($mobile-to-desktop-breakpoint) { max-width: 550px; &[class*="yt-"] { max-width: 100%; } } @include breakpoint($desktop-to-wide-desktop-breakpoint) { max-width: 800px; &[class*="yt-"] { max-width: 100%; } } } // these classes are on div between figure and iframe .yt-sm { position: relative; overflow: hidden; max-width: 240px; height: 0; padding-bottom: 200px; // @include breakpoint($mobile-to-desktop-breakpoint) { // padding-bottom: 56.25%; // } } .yt-med { position: relative; overflow: hidden; height: 0; padding-bottom: 56.25%; } .yt-lg { position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; } .yt-med iframe, .yt-med object, .yt-med embed, .yt-lg iframe, .yt-lg object, .yt-lg embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .user_content, .user_content_styles { // only apply at wider sizes @include breakpoint($youtube-breakpoint) { figure.yt-left { float: left; margin-right: $float-side-margin; margin-left: 0px; } figure.yt-center { margin-right: auto !important; margin-left: auto !important; } figure.yt-right { float: right; clear: right; margin-top: $aside-margin-bottom; margin-right: 0px; margin-bottom: $aside-margin-bottom; margin-left: $float-side-margin !important; } figure.yt-left-nofloat { float: none; margin-left: 0px; } } } // PRINT styles @media print { figure.rightcaption, figure.yt-right { float: right; margin-right: 0px; margin-left: $float-side-margin; } figure.yt-center { margin-right: auto !important; margin-left: auto !important; } figure.leftcaption, figure.yt-left { float: left; margin-right: $float-side-margin; margin-left: 0px; } figure.yt-left, figure.yt-right { clear: both; padding: 10px; border: 1px solid #c9c9c9 !important; } .yt-med, .yt-lg { border: 1px solid #c9c9c9 !important; background-color: #c9c9c9 !important; } }