YouTube videos are a dynamic way to present information on your web site.

Best practices

  • Select YouTube titles and thumbnails that contextualize the video embed.
  • Use only one YouTube block per page. Use a playlist when multiple videos are needed. (Multiple YouTube blocks slow page load time.)
  • Ensure videos complement or enhance the page content goals.
  • Strive to use videos as feature content, in a 50% or larger column width.
  • Handle: @youtube-video
  • Preview:
  • Filesystem Path: src/components/02-blocks/media/youtube-video/youtube-video.hbs
<div class="ContentBlock YouTubePlayer Page10">
    <script>
        missouristate.addLoadEvent(function() {
            function getHeight(elem) {
                return Math.round(elem.clientWidth * 9 / 16);
            }
            var elems = document.getElementsByClassName('Page10');
            for (var i = 0; i < elems.length; i++) {
                var iframes = elems[i].getElementsByTagName('iframe');
                if (iframes.length > 0) {
                    continue;
                }
                var iframe = document.createElement('iframe');
                iframe.width = '100%';
                iframe.height = getHeight(elems[i]);
                missouristate.addEvent(window, 'resize', (function(iframe) {
                    return function() {
                        iframe.height = getHeight(iframe);
                    };
                })(iframe));
                iframe.setAttribute('allowfullscreen', 'allowfullscreen');
                if (!document.addEventListener) {
                    iframe.setAttribute('frameborder', 'no');
                }
                if (document.attachEvent) {
                    iframe.setAttribute('scrolling', 'no');
                }
                var src = 'TSzSk7k6ftk';
                if (src.indexOf('http') === 0) {
                    src = src.substring(src.indexOf('/'));
                } else {
                    src = 'https://www.youtube.com/embed/' + src;
                }
                iframe.title = 'YouTube Video';
                iframe.src = src;
                elems[i].appendChild(iframe);
            }
        });
    </script>
</div>
<div class="ContentBlock YouTubePlayer Page{{pageId}}">
    {{#if HeadingText}}
        <h{{HeadingLevel}}>
            {{HeadingText}}
        </h{{HeadingLevel}}>
    {{/if}}
    <script>
        missouristate.addLoadEvent(function () {
            function getHeight(elem) {
                return Math.round(elem.clientWidth * 9 / 16);
            }
            var elems = document.getElementsByClassName('Page{{pageId}}');
            for (var i = 0; i < elems.length; i++) {
                var iframes = elems[i].getElementsByTagName('iframe');
                if (iframes.length > 0) { continue; }
                var iframe = document.createElement('iframe');
                iframe.width = '100%';
                iframe.height = getHeight(elems[i]);
                missouristate.addEvent(window, 'resize', (function (iframe) {
                    return function () { iframe.height = getHeight(iframe); };
                })(iframe));
                iframe.setAttribute('allowfullscreen', 'allowfullscreen');
                if (!document.addEventListener) { iframe.setAttribute('frameborder', 'no'); }
                if (document.attachEvent) { iframe.setAttribute('scrolling', 'no'); }
                var src = '{{youTubeId}}';
                if (src.indexOf('http') === 0) {
                    src = src.substring(src.indexOf('/'));
                } else {
                    src = 'https://www.youtube.com/embed/' + src;
                }
                iframe.title = 'YouTube Video';
                iframe.src = src;
                elems[i].appendChild(iframe);
            }
        });
    </script>
</div>
{
  "pageId": 10,
  "headingText": "Lorem ipsum dolor",
  "youTubeId": "TSzSk7k6ftk",
  "headingLevel": "2"
}