Merge pull request #446 from kerstin/fix_yt_objects

fix YouTube embeds in docs
Zulko · Mar 3, 2017 · 1fb79c1 · 1fb79c1
2 parents 6530f5b + a8c46da
commit 1fb79c1
Show file tree

Hide file tree

Showing 15 changed files with 49 additions and 161 deletions.
diff --git a/docs/examples/compo_from_image.rst b/docs/examples/compo_from_image.rst
@@ -7,15 +7,7 @@ So how do you do some complex compositing like this ?
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/1hdgNxX-tas&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/1hdgNxX-tas&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/1hdgNxX-tas&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 It takes a lot of bad taste, and a segmenting tool
 

diff --git a/docs/examples/dancing_knights.rst b/docs/examples/dancing_knights.rst
@@ -6,9 +6,9 @@ And now for something very silly...
 
 .. raw:: html
 
-        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; 
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden;
          margin-left: 5%;">
-        <iframe src="http://youtube.com/v/Qu7HJrsEYFg?rel=0" frameborder="0" allowfullscreen
+        <iframe type="text/html" src="https://youtube.com/embed/Qu7HJrsEYFg?rel=0" frameborder="0"
         style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;">
         </iframe>
         </div>

diff --git a/docs/examples/example_with_sound.rst b/docs/examples/example_with_sound.rst
@@ -7,15 +7,7 @@ An example of using MoviePy to assemble movie clips with sounds. Here are two sc
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/gtyFuIoH7W0&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/gtyFuIoH7W0&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/gtyFuIoH7W0&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 Here is the code:
 

diff --git a/docs/examples/headblur.rst b/docs/examples/headblur.rst
@@ -4,15 +4,7 @@ Tracking and blurring someone's face
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/FWCKYTRCrBI&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/FWCKYTRCrBI&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/FWCKYTRCrBI&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 First we will need to track the face, i.e. to get two functions ``fx`` and ``fy`` such that ``(fx(t),fy(t))`` gives the position of the center of the head at time ``t``. This will be easily done with
 `manual_tracking`. Then we will need to blur the area of the video around the center of the head.

diff --git a/docs/examples/logo.rst b/docs/examples/logo.rst
@@ -3,16 +3,8 @@ MoviePy logo with a moving shadow
 =================================
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/TG86KzL18NA&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/TG86KzL18NA&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/TG86KzL18NA&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 Here the logo is a picture, while the shadow is actually a black rectangle taking the whole screen, overlaid over the logo, but with a moving mask composed of a bi-gradient, such that only one (moving) part of the rectangle is visible. See :ref:`gradients` for the code of the function `biGradient`: ::
-    
+
 
diff --git a/docs/examples/masked_credits.rst b/docs/examples/masked_credits.rst
@@ -5,32 +5,13 @@ Partially Hidden credits
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/NsTgBah6Ebk&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/NsTgBah6Ebk&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/NsTgBah6Ebk&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 First, see in :ref:`autocredits` how to make credits automatically with MoviePy. Before seeing the code for this video, here is a tutorial video that explains the different steps (also made with MoviePy):
-
-.. raw:: html
-
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/7tKABfc0Yzw&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/7tKABfc0Yzw&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
 
+.. raw:: html
 
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/7tKABfc0Yzw&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 
 And here is the code:

diff --git a/docs/examples/moving_letters.rst b/docs/examples/moving_letters.rst
@@ -6,16 +6,7 @@ I think this example illustrates well the interest of script-based editing (imag
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/jj5qrHl5ZS0&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/jj5qrHl5ZS0&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/jj5qrHl5ZS0&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 Here is the code:
 

diff --git a/docs/examples/painting_effect.rst b/docs/examples/painting_effect.rst
@@ -6,15 +6,7 @@ That's an effect that we have seen a lot in westerns and such.
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/aC5CifkacSI&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/aC5CifkacSI&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/aC5CifkacSI&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 The recipe used to make a photo look like a painting:
 

diff --git a/docs/examples/severalCharacters.rst b/docs/examples/severalCharacters.rst
@@ -6,15 +6,6 @@ Character duplication in a video
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/sZMyzzGlsc0&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/sZMyzzGlsc0&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/sZMyzzGlsc0&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 So blabla
diff --git a/docs/examples/star_worms.rst b/docs/examples/star_worms.rst
@@ -1,36 +1,18 @@
 A Star-Wars like opening title
 -------------------------------
 
-This is an approximate effect (the perspective would require some more complex transformations) but it is a nice exercise. 
+This is an approximate effect (the perspective would require some more complex transformations) but it is a nice exercise.
 
 Warning: clip with sound.
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/5euLdo8L0o0&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/5euLdo8L0o0&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
 Let us also have a look at this tutorial which shows the different steps:
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/dGrP7GhzWEE&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/dGrP7GhzWEE&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/5euLdo8L0o0&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
+
 And here you are for the code, and for the code of the tutorial.
 
 .. literalinclude:: ../../examples/star_worms.py
diff --git a/docs/examples/the_end.rst b/docs/examples/the_end.rst
@@ -4,21 +4,13 @@
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/sZMyzzGlsc0&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/sZMyzzGlsc0&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/sZMyzzGlsc0&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
+
 So let's explain this one: there is a clip with "The End" written in the middle, and *above* this
 clip there is the actual movie. The actual movie has a mask which represents
 a white (=opaque) circle on a black (=transparent) background. At the begining,
 that circle is so large that you see all the actual movie and you don't see
 the "The End" clip. Then the circle becomes progressively smaller and as a
 consequence you see less of the actual movie and more of the "The End" clip.
-    
+
 .. literalinclude:: ../../examples/the_end.py
diff --git a/docs/examples/ukulele_concerto.rst b/docs/examples/ukulele_concerto.rst
@@ -4,16 +4,7 @@ A simple music video
 
 .. raw:: html
 
-        <center>
-        <object><param name="movie"
-        value="http://www.youtube.com/v/AqGZ4JFkQTU&hl=en_US&fs=1&rel=0">
-        </param><param name="allowFullScreen" value="true"></param><param
-        name="allowscriptaccess" value="always"></param><embed
-        src="http://www.youtube.com/v/AqGZ4JFkQTU&hl=en_US&fs=1&rel=0"
-        type="application/x-shockwave-flash" allowscriptaccess="always"
-        allowfullscreen="true" width="550" height="450"></embed></object>
-        </center>
-
+        <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; margin-bottom:30px; height: 0; overflow: hidden; margin-left: 5%;"><iframe type="text/html" src="https://youtube.com/embed/AqGZ4JFkQTU&hl=en_US&fs=1&rel=0" frameborder="0" style="position: absolute; top: 0; bottom: 10; width: 90%; height: 100%;"></iframe></div>
 
 This is an example, with no sound (lame for a music video), soon to be
 replaced with a real music video example (the code will be 99% the same).