The video widget on the main page of The Michigan Daily can take both YouTube videos and shorts—note that we currently only do shorts since the video format looks a bit off on the site.
Changing the featured video
Big 4 can change the video as desired using the instructions below:
<div id="yt-short-wrap" style="position: relative; width: 100% !important; max-width: 361px !important; aspect-ratio: 9 / 16; margin: 0 auto;">
<iframe id="yt-short"
style="position:absolute; inset:0; width:100%; height:100%;"
src="https://www.youtube.com/embed/1VCUHxfg1HI?enablejsapi=1&mute=1&playsinline=1&loop=1&playlist=1VCUHxfg1HI"
title="UM Football Head Equipment Manager Sonny Anderson talks with Daily Beat Writer Drew Lenard"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
</div>
<script>
(function () {
var wrap = document.getElementById('yt-short-wrap');
var frame = document.getElementById('yt-short');
function send(fn) {
frame.contentWindow.postMessage(
JSON.stringify({ event: 'command', func: fn, args: [] }), '*'
);
}
frame.addEventListener('load', function () {
// small delay so the YouTube player is ready to accept commands
setTimeout(function () {
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
send(entry.isIntersecting ? 'playVideo' : 'pauseVideo');
});
}, { threshold: 0.5 }); // plays when 50% of the video is visible
observer.observe(wrap);
}, 800);
});
})();
</script>
- Copy and paste the code above into “Custom HTML” code block
- Change the IDs inside src=”” section to the desired YouTube short link (this is changed in two places; see the underlined areas for where to replace)
- Change title=”” to the official title of the YouTube Short.
Perfmatters
perfmatters should be disabled in the WordPress plugins to allow YouTube Shorts to fully span the height. If enabled, video dimensions will be restricted by perfmatter dimensions.