Help to embed speakerDeck

Bootstrap Studio Help
1

Hi, I am new on BSS and even with bootstrap (!). I have just some old basis... I made some presentations at https://speakerdeck.com/ and I had like to embed them in my page.

The code I got for embedding looks like: <script async class="speakerdeck-embed" data-id="13...6bf...b4" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

In fact I've just 3 presentations, I'd like to be able to set their size, then to be responsive.

Any idea on how to make it simple?

Thanks

Fred

2

I think that's all going to depend on what the resulting embedded code is. If it's an iFrame, you're going to have difficulty on styling anything in the iFrame but you can have some say on the iFrame's element it's self. You'll be able to adjust the width and height of the iFrame and things like that but because it is a cross domain content being embedded you can't style any of the content with in it. If the script generates a DIV element and Ajax requests content and then injects it into the DIV, you should be able to style the embedded content, effectively over ride it really. That's also not necessarily easy to do as either embed method will inject it's own CSS styling which very likely will be placed after your's which makes their styling have greater specificity then yours. So a possible way around that is to add a Custom Code element in your page near the end of your site with the CSS STYLE tag and your custom override CSS in it to return specificity back to you.

It may be possible that the embedded code is already capable of responsiveness so if you put it in a row > col that probably will just work. It's worth a shot anyways.

Three equally sized columns

<div class="row">
    <div class="col"> // embed #1
        <script async class=”speakerdeck-embed” data-id=”13…6bf…b4? data-ratio=”1.77777777777778? src=”//speakerdeck.com/assets/embed.js”></script>
    </div>
    <div class="col"> // embed #2
        <script async class=”speakerdeck-embed” data-id=”13…6bf…b4? data-ratio=”1.77777777777778? src=”//speakerdeck.com/assets/embed.js”></script>
    </div>
    <div class="col"> // embed #3
        <script async class=”speakerdeck-embed” data-id=”13…6bf…b4? data-ratio=”1.77777777777778? src=”//speakerdeck.com/assets/embed.js”></script>
    </div>
</div>

The scripts will need to be in a Custom Code block for each one. It's better that you do individual ones rather than convert the whole ROW etc... it just gives you more BSS app control options.

Saj