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>

Credit: https://www.benmarshall.me/responsive-iframes/

How to Resize iFrame Embedded Videos in Moodle™ Software Platform

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

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

Subscribe to Newsletter

Guides & Tutorials

Resources

Services

About

Recommended Products

How to Resize iFrame Embedded Videos in Moodle™ Software Platform

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

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

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

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