Readthedocs.org: Embed video/youtube ?

Created on 8 Aug 2014  路  4Comments  路  Source: readthedocs/readthedocs.org

Hello,

I am quite new to readthedocs.org and the whole Sphinx thing. And I was wondering if you ever considered supporting embedding video in the docs ? It seems that it could benefit many people, including readthedocs itself.

It seems that http://countergram.com/youtube-in-rst would be a starting point. But I honestly have no idea how/where this should be integrated, or even if this is a good idea.

I would really appreciate if you could give me a few pointers on how to achieve this. And please forgive me if I am talking non-sense.

Most helpful comment

Thanks a lot for the pointer. I can easily embed responsive youtube video with the following code:

.. raw:: html

    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
        <iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
    </div>

All 4 comments

You should just be able to include the HTML embed code with a .. raw:: block, I believe. There's also some embed tasks that I believe people have used, but this isn't a RTD issue, so I'm closing it.

Thanks a lot for the pointer. I can easily embed responsive youtube video with the following code:

.. raw:: html

    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
        <iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
    </div>

I had to put "https:~~" for an youtube url. For example,

.. raw:: html

    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
    </div>

I also added margin-bottom: 2em; to the <div> as I have content directly after the video

Was this page helpful?
0 / 5 - 0 ratings