Themes

Hello,

I am running Moodle 3.2 with the 1.4 version of the wonderful Fordson theme. 

However, when I try to embed a video from Vimeo, its not displayed correctly and adjusted for mobile/tablet views. (I created pages, with texts and the embedded videos.)

Little research online suggests to add a little site-global CSS to the page

.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}

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

<div class="responsive-video">
<iframe src="http://player.vimeo.com/video/47387431?title=0&amp
;byline=0&amp;portrait=0&amp;autoplay=0"
width="1600" height="900" frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen></iframe>
</div>

Unfortunately its not working as intended and I see no adjustment at all, but maybe I paste the code into the wrong boxes. (Im an absolute css/moodle-beginner.) I tried to paste the code in the SCSS box of the color tab in Fordson, since its the only visible possibility for me to add CSS code (after I converted the CSS to SCSS online).

The display errors I receive upon that indicate that I might be totally wrong. Anybody got an idea or tip for me, how I can fix this issue for mobile users under Fordson?

Thanks in advance!