temple home page video snippet.html

<div id="bean-hero-video-single-cta-full-group-media-wrapper" class=" group-media-wrapper field-group-div">
    <div class="field field-name-field-hero-image field-type-image field-label-hidden">
        <img typeof="foaf:Image"
             src="https://www.temple.edu/sites/temple/files/Screen%20Shot%202017-06-28%20at%209.07.25%20AM_0.png"
             alt="Person in dark room."></div>

    <div class="field field-name-field-video-background-image field-type-image field-label-hidden">
        <img typeof="foaf:Image"
             src="https://www.temple.edu/sites/temple/files/Screen%20Shot%202017-06-28%20at%209.07.25%20AM_0_0.png"
             alt="Person in dark room."></div>

    <div class="field field-name-field-html5-video-embed field-type-text-long field-label-hidden">
        <div>
            <script type="text/javascript">
                <!--//-->
                <![CDATA[// ><!--
                document.getElementsByTagName('body')[0].className += ' take-over';
                //--><!
                ]]>
            </script>
            <p>
                <video autoplay="" id="nextstop_video" muted="" preload="auto">
                    <source src="https://www.temple.edu/sites/temple/files/uploads/video/TU_Innovating_Web_S01_02.mp4"
                            type="video/mp4">
                    <source src="https://www.temple.edu/sites/temple/files/uploads/video/TU_Innovating_Web_S01_02.oggtheora.ogv"
                            type="video/ogg">
                    <source src="https://www.temple.edu/sites/temple/files/uploads/video/TU_Innovating_Web_S03_02.webmhd"
                            type="video/webm">
                </video>
            </p>
            <style type="text/css">
                <!-- /*--><![CDATA[/* ><!--*/

                .bean-hero-video-single-cta .field-name-field-hero-video-header {
                    position: relative;
                    left: 0;
                }

                .field-name-field-hero-video-header:before {
                    content: "";
                    position: absolute;
                    padding: 0;
                    margin: 0;
                    left: 0;
                    top: 0;
                    height: auto;
                    width: 26%;
                    border-radius: 0.5em;
                    border-top: 0.15em solid #9e1b34;
                }

                .bean-hero-video-single-cta .field-name-field-hero-header, .bean-hero-video-single-cta .field-name-field-hero-video-header {
                    background: none;
                    box-shadow: none;
                    line-height: 1.1em !important;
                    text-shadow: -0.045em 0.045em 0.035em rgba(0, 0, 0, 0.25);
                }

                @media (min-width: 740px) {
                    .field-name-field-hero-cta {
                        margin-bottom: 15px;
                    }

                    .bean-hero-video-single-cta .group-header-wrapper {
                        width: 50em;
                    }

                    .bean-hero-video-single-cta .field-name-field-hero-header, .bean-hero-video-single-cta .field-name-field-hero-video-header {
                        line-height: 1.2em !important;
                    }

                    .field-name-field-hero-video-header:before {
                        width: 10%;
                    }
                }

                @media (min-width: 1100px) {
                    .bean-hero-video-single-cta .group-header-wrapper {
                        width: 80em;
                    }
                }

                /*--><!]]>*/
            </style>
        </div>
    </div>
</div>