Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed video/youtube ? #879

Closed
PowerKiKi opened this issue Aug 8, 2014 · 4 comments
Closed

Embed video/youtube ? #879

PowerKiKi opened this issue Aug 8, 2014 · 4 comments

Comments

@PowerKiKi
Copy link
Contributor

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.

@ericholscher
Copy link
Member

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.

@PowerKiKi
Copy link
Contributor Author

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>

@SuperShinyEyes
Copy link

SuperShinyEyes commented Mar 15, 2018

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>

@asottile
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants