Wiki-embed on the new UBC CLF Layout (responsive)

[rienamba]

Hi,
I am using Wiki-embed with the new UBC CLF Layout, but I found few things that do not work well on the new UBC CLF Layout:

• The images and videos on the wiki embed are not responsive by default. So whenever I try to make images or videos responsive with the content in wiki embed, I have to use JQuery to manually wrap the iframe and objects with the < div class="responsive-media" > code.
• All the links within the Wiki embed does not line-break, so when the page is browsed on a screen below 534 px (including Iphone 4), the link goes over the layout, and causes a weird spacing on the right-hand side:

Edited: Mar 4 - It got fixed when I add the CSS:
a.external.free {
word-break: break-word;
}
.wiki-embed-source{
word-break:break-word; }

[enejb]

Can you give an example where you are doing this.
Cheers

[rienamba]

Hi Enej,
an example of the page I am doing this is http://elearning4.sites.olt.ubc.ca/tools/approaches/eportfolios/

The JQuery Code I added for work-around (To force medias in wiki-embed to be responsive)
/Makes embedded videos in Wiki Embed responsive/
var $ = jQuery.noConflict();
$( ".wiki-embed iframe" ).wrap( "

" );
$( ".wiki-embed object" ).wrap( "

" );
$(".wiki-embed .thumbinner").css("width", "100%");

The CSS I added for workaround(Special thanks to Loong. To force URL in Wiki-embed to word-break. ) :
a.external.free {
word-break: break-word;
}
.wiki-embed-source{
word-break:break-word; }