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; }