Adding CSS to an Embedded Yammer - css

Question

<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript">
yam.connect.embedFeed({
"config": {
"use_sso": false,
"header": false,
"footer": false,
"showOpenGraphPreview": false,
"defaultToCanonical": false,
"hideNetworkName": false,
"defaultGroupId": 8430003
},
"container": "#embedded-feed"
});
</script>
How would I insert CSS into it in order to change the background color of the embedded yammer?
<style>
#embedded-feed { background-color: orange; }
</style>
If I use the above CSS turns it orange, and the immediately reverses.

Answer 1

The embedded content is inside an iframe that got a white background. I'm afraid you cannot change it.
You can sort of manipulate it in a hacky way, by using a pseudo element (::after) on top of the container (#embedded-feed), which has a background and a blend mode:
#embedded-feed {
position: relative;
}
#embedded-feed::after {
content:'';
position: absolute;
left: 0; right: 0; bottom: 0; top: 0;
background: orange;
pointer-events: none;
mix-blend-mode: multiply;
}
<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
yam.connect.embedFeed({
container: '#embedded-feed',
network: 'fourleaf.com',
feedType: 'group', // can be 'group', 'topic', or 'user'
feedId: '123', // feed ID from the instructions above
config: {
defaultGroupId: 3257958 // specify default group id to post to
}
});
</script>
jsFiddle: https://jsfiddle.net/azizn/40faxryw/
Be careful, this is experimental and has limited browser support as of now (FF32, Chrome 41+, Safari 8+, Opera, No IE).
You can play around with different options, colors and/or opacity:
Cannot think of another solution that does not involve CORS.
MDN - CSS mix-blend-mode
Can I use... mix-blend-mode