Responsive Youtube with Max-Width

Responsive Youtube with Max-Width

Nosūtīja Michael Grainger —
Atbilžu skaits: 4

Moodle 2.6.2+ (Build: 20140415) - Theme=Essential

Hi,

Is there a way to have an embedded youtube video within a lesson (or any other activity) that is responsive (especially for mobile devices) yet displays as a maximum width in normal (wider) browsers?

I'm already able to make the video responsive using additional css in the theme settings (essential theme):

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

 

This works fine when I enclose the youtube html in a div tag referring to the above css classes.

HOWEVER, I don't want the video to display at 100% width on larger screens as it just becomes too big compared to other content when the page is full screen (looks great on iPhone though).

I'd really like to be able to set a max-width of 500px

Maybe this is something really simple but nothing I've tried has worked.

Any help appreciated.

 

Thanks

Mike

 

Vidējais novērtējums: -
Atbildot uz Michael Grainger

Re: Responsive Youtube with Max-Width

Nosūtīja Michael Grainger —

Figured it out myself - and for most people I guess it would have been pretty easy....

 

 

I just created another class in the custom css:

 

.video-container{

max-width: 500px;}

 

I then used this to nest the responsive video style:

<div style = "video-container">

      <div style = "video-responsive iframe">

          <iframe width="420" height="315" src="//www.youtube.com/embed/g6GuEswXOXo" frameborder="0" allowfullscreen></iframe>

      </div>

 

<div>

Pretty simple when you know how.... I took a crash course in css in one afternoon! Thought I would share this just in case anybody else ever has the same issue again.

 

Two sources that really helped me:

css-tricks.com

and Jake Wright:

Vidējais novērtējums: -
Atbildot uz Michael Grainger

Re: Responsive Youtube with Max-Width

Nosūtīja Anu Laitakari —

This did not work for me until I changed the wrapper from div style = to div class=.

Also, I had issues with IE. Chrome and Firefix worked beautifully but IE refused to render the video at all until I changed allowfullscreen="true".

I know this is an old post but just in case anyone else needs this solution and is struggling.



Vidējais novērtējums: -
Atbildot uz Michael Grainger

Re: Responsive Youtube with Max-Width

Nosūtīja Vijai Pandey —

Thank you very much. 

Your post saved my day. It works perfectly. Just one change, instead of style=".video......" is used class=".video....." as css style has identifier for class (.)

Vidējais novērtējums: -