Doc: Fix the \youtube macro for use with liteHTML help backend

Create a common directory for extra image files, and move the video
thumbnails there. This folder structure is required to work around
the fact that relative image paths passed to qhp.<project>.extraFiles
are not resolved correctly when loading the generated help project.

Change-Id: Iff5583a9a318670571b7f706182723e54e0ec466
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Topi Reiniö <topi.reinio@qt.io>

doc/config/macros-online.qdocconf

@@ -0,0 +1,4 @@
+macro.youtube.HTML = "<div class=\"video\">\n<span class=\"vspan\"></span>\n" \
+                     "<iframe src=\"https://www.youtube.com/embed/\1\"" \
+                     "frameborder=\"0\" allowfullscreen>\n" \
+                     "</iframe></div>\n"

doc/config/macros.qdocconf

@@ -55,10 +55,8 @@ macro.emptyspan.HTML	    = "<span></span>"
 # HTML.extraimages           += images/dQw4w9WgXcQ.jpg
 # qhp.ProjectName.extraFiles += images/dQw4w9WgXcQ.jpg
 #
-macro.youtube.HTML = "<div class=\"video\">\n<span class=\"vspan\"></span>\n" \
-                     "<iframe src=\"https://www.youtube.com/embed/\1\"" \
-                     "frameborder=\"0\" allowfullscreen>\n" \
+macro.youtube.HTML = "<div class=\"video\">\n" \
                      "<a href=\"https://www.youtube.com/watch/?v=\1\">\n"\
                      "<img src=\"images/\1.jpg\"" \
                      "title=\"Click to play in a browser\" /></a>\n" \
-                     "</iframe></div>\n"
+                     "</div>\n"

doc/qtcreator/config/qtcreator-project.qdocconf

@@ -43,8 +43,7 @@ imagedirs = ../images \
 exampledirs = ../examples
 examples.fileextensions += *.qml *.svg
 
-HTML.extraimages         = ../../config/images/commercial.png
-qhp.QtCreator.extraFiles = ../../config/images/commercial.png
+include(../../qtcreator/images/extraimages/qtcreator-extraimages.qdocconf)
 
 depends +=    qtandroidextras\
               qtwidgets \

doc/qtcreator/images/extraimages/qtcreator-extraimages.qdocconf

@@ -0,0 +1,4 @@
+{HTML.extraimages,qhp.QtCreator.extraFiles} += \
+    images/commercial.png \
+    images/RfEYO-5Mw6s.jpg \
+    images/yOUdg1o2KJM.jpg

doc/qtcreator/images/extraimages/qtdesignstudio-extraimages.qdocconf

@@ -0,0 +1,8 @@
+{HTML.extraimages,qhp.qtdesignstudio.extraFiles} += \
+    images/commercial.png \
+    images/SsFWyUeAA_4.jpg \
+    images/9ihYeC0YJ0M.jpg \
+    images/aV6kFxH3Xws.jpg \
+    images/ZzbucmQPU44.jpg \
+    images/RfEYO-5Mw6s.jpg \
+    images/yOUdg1o2KJM.jpg

doc/qtcreator/qtcreator-online.qdocconf

@@ -16,5 +16,8 @@ HTML.footer = \
 
 include($QT_INSTALL_DOCS/global/qt-html-templates-online.qdocconf)
 
+# Override macros for online use
+include(../config/macros-online.qdocconf)
+
 # Add an .html file with sidebar content, used in the online style
 HTML.stylesheets               += config/style/qt5-sidebar.html

doc/qtcreator/src/qtquick/qtquick-designer.qdoc

@@ -108,4 +108,7 @@
     You can move the views anywhere on the screen and save them as
     \e workspaces, as instructed in \l {Managing Workspaces}.
 
+    Watch a video about using the Design mode views:
+
+    \youtube RfEYO-5Mw6s
 */

doc/qtdesignstudio/config/qtdesignstudio.qdocconf

@@ -39,6 +39,8 @@ imagedirs = ../images \
             ../../../src/plugins/qmldesigner/qtquickplugin/images \
             ../../../src/plugins/texteditor/images
 
+include(../../qtcreator/images/extraimages/qtdesignstudio-extraimages.qdocconf)
+
 excludefiles += ../../qtcreator/src/qtcreator.qdoc \
                 ../../qtcreator/src/qtcreator-toc.qdoc
 
@@ -69,13 +71,6 @@ exampledirs = ../examples/ \
               ../../qtcreator/examples
 examples.fileextensions += *.qml *.svg *.ts *.qm
 
-{HTML.extraimages,qhp.qtdesignstudio.extraFiles} += ../../config/images/commercial.png \
-              ../images/videoicons/SsFWyUeAA_4.jpg \
-              ../images/videoicons/9ihYeC0YJ0M.jpg \
-              ../images/videoicons/aV6kFxH3Xws.jpg \
-              ../images/videoicons/ZzbucmQPU44.jpg
-
-
 depends +=    qtwidgets \
               qtcore \
               qtqml \

doc/qtdesignstudio/qtdesignstudio-online.qdocconf

@@ -3,6 +3,9 @@ include($QT_INSTALL_DOCS/global/qt-html-templates-online.qdocconf)
 include(config/html-online.qdocconf)
 include(config/qtdesignstudio.qdocconf)
 
+# Override macros for online use
+include(../config/macros-online.qdocconf)
+
 # Add an .html file with sidebar content, used in the online style
 HTML.stylesheets               += config/style/qt5-sidebar.html