Search
Close this search box.

How to Resize iFrame Embedded Videos in Moodle™ Software Platform

Most of the time, in Moodle users embed videos as in embedded format via iframes from other video hosting platforms. However, as more and more users use mobile devices, it would be nice to reformat the iframe content automatically. Here is how you can achieve it:

STEP 1
Have the Moodle administrator add the following code to the Moodle theme in the Custom CSS area:

				
					.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9*/
  position: relative;
}


.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
				
			

STEP 2
Have users enter the following code as part of the content pages.

				
					<div class="iframe-container">
<iframe src="//www.youtube.com/embed/VIDEOID" allowfullscreen></iframe>
</div>