Sphinx embed object iFrame video html PDF Twitter examples

Docutils documentation - Raw Data Pass-Through - Raw Directive

https://docutils.sourceforge.io/docs/ref/rst/directives.html#raw-data-pass-through

Fix key mapping issues - cannot paste larger clips when doing copy-paste in vscode - intermittently the past few months

https://github.com/microsoft/vscode/wiki/Keybinding-Issues#troubleshoot-linux-keybindings

Recommendation for key mapping issues in vscode - settings to adjust

“keyboard.dispatch”: “keyCode”

Example of embedded YouTube video (works)

This screencast will help you get started or you can read our guide below.

<div style="text-align: center; margin-bottom: 2em;">
<iframe width="100%" height="350" src="https://www.youtube-nocookie.com/embed/oJsUvBQyHBs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Example of embedded GitHub Project Issue Kanban board - for this project (Need to do this)

Need to do this

Use a large figure as a cover on a link (but people may not know to click it to download the PDF)

.. figure:: /assets/2017-Spars-Pandemic-Tabletop-communications-exercise/171018-spars-pandemic-scenario-cover-page.jpg
    :align: right
    :width: 80 %
    :target: /assets/2017-Spars-Pandemic-Tabletop-communications-exercise/spars-pandemic-scenario.pdf
    :alt: SPARS Pandemic scenario book (PDF)

    Self-guided tabletop training experience challenges public health communicators and risk communication researchers to consider the complex messaging dilemmas of a future outbreak that requires development of a new vaccine

    Source `SPARS Pandemic scenario book (PDF) March 30 2021`_.

    .. _SPARS Pandemic scenario book (PDF) March 30 2021: https://www.centerforhealthsecurity.org/our-work/pubs_archive/pubs-pdfs/2017/spars-pandemic-scenario.pdf

Fig. 143 Self-guided tabletop training experience challenges public health communicators and risk communication researchers to consider the complex messaging dilemmas of a future outbreak that requires development of a new vaccine

Source SPARS Pandemic scenario book (PDF) March 30 2021.

SPARS pandemic scenario book

How to use an <object> that embeds a PDF into a sphinx rst page as a link (works only as a link)

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies

https://pandemic-overview.readthedocs.io/en/latest/_images/171018-spars-pandemic-scenario-cover-page.jpg

https://pandemic-overview.readthedocs.io/en/latest/_images/spars-pandemic-scenario.pdf

<div style="text-align: center; margin-bottom: 2em;">
<object data="spars-pandemic-scenario.pdf" type="application/pdf"
        width="800" height="1200">
<p>You don't have a PDF plugin, but you can
    <a href="spars-pandemic-scenario.pdf">download the PDF file.
    </a>
</p>
</object>
</div>

How to insert a javascript in a single Sphinx page and create an alert box? (does not work)

https://stackoverflow.com/questions/59098032/how-to-insert-a-javascript-in-a-single-sphinx-page

<div style="text-align: center; margin-bottom: 2em;">
<script>
function myFunction() {
 alert("I am an alert box!");
}
</script>
</div>

Example of embedded Twitter page (does not work)

<div style="text-align: center; margin-bottom: 2em;">
<iframe width="100%" height="350" src="https://twitter.com" frameborder="0" allowfullscreen></iframe>
</div>

Embed a player using the IFrame Player API (perfect)

https://developers.google.com/youtube/player_parameters

<div style="text-align: center; margin-bottom: 2em;">
<div id="ytplayer"></div>

<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
    height: '360',
    width: '640',
    videoId: 'M7lc1UVf-VE'
    });
}
</script>
</div>

Example of embedded GIF hosted elsewhere (need to scale or make fullscreen)

<div style="text-align: center; margin-bottom: 2em;">
<iframe width="100%" height="350" src="https://i1.wp.com/techcrunch.com/wp-content/uploads/2021/05/starline-gif.gif?ssl=1" frameborder="0" allowfullscreen></iframe>
</div>

Example of sphinx page with embedded other website using “embed” (needs to scale properly)

<div style="text-align: center; margin-bottom: 2em;">
<embed type="text/html" src="https://drudgereport.com" width="500" height="200">
</div>

Example of sphinx page with embedded other website using “object” (needs to scale properly)

<div style="text-align: center; margin-bottom: 2em;">
<object data="https://drudgereport.com" width="500" height="200"></object>
</div>

Example of sphinx page with embedded other website using “iframe” (needs to scale properly)

<div style="text-align: center; margin-bottom: 2em;">
<iframe width="100%" height="350" src="https://drudgereport.com" frameborder="0" allowfullscreen></iframe>
</div>

Example 2 of sphinx page with embedded other website using “iframe” (needs to scale properly)

<div style="text-align: center; margin-bottom: 2em;">
<iframe width="100%" height="350" src="https://drudgereport.com" frameborder="0" allowfullscreen></iframe>
</div>

Example of sphinx page with a javascript button onClick calling a function calling an alert box (works)

<div style="text-align: center; margin-bottom: 2em;">
<script>
function myFunction() {
 alert("I am an alert box!");
}
</script>

<button onclick="myFunction()">Try it</button>
</div>

Try it

How can i insert html and css and javascript both in a sphinx’s reStructuredText file ? (does not work)

The html content:

https://cloudstack.ninja/showkey/how-to-embed-html-and-css-and-javascript-in-sphinxs-restructuredtext-file/

<div id="mytest">test</div>

The css content:

<style type='text/css'>
#mytest{
    border:1px solid red;
    height:80px;
    width:80px;
}
</style>

The javascript content:

<script type='text/javascript'>
var ob = document.getElementById('mytest');
ob.onmouseover = function(){
    this.innerHTML = 'text in box changed';
}
</script>

Note

This page was:

Created May 12 2021

Updated May 13 2021

Last Built Tue, 03 Aug 2021 10:25 PM UTC

Last change: Tue, 03 Aug 2021 10:25 PM UTC