diff --git a/doc/config/macros-online.qdocconf b/doc/config/macros-online.qdocconf
new file mode 100644
index 00000000000..c6f370a7d76
--- /dev/null
+++ b/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"
diff --git a/doc/config/macros.qdocconf b/doc/config/macros.qdocconf
index d2e02d06784..0d9e14ffa0a 100644
--- a/doc/config/macros.qdocconf
+++ b/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"
diff --git a/doc/qtcreator/config/qtcreator-project.qdocconf b/doc/qtcreator/config/qtcreator-project.qdocconf
index cff09e5c3bc..479d17ed8b2 100644
--- a/doc/qtcreator/config/qtcreator-project.qdocconf
+++ b/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 \
diff --git a/doc/qtdesignstudio/images/videoicons/9ihYeC0YJ0M.jpg b/doc/qtcreator/images/extraimages/images/9ihYeC0YJ0M.jpg
similarity index 100%
rename from doc/qtdesignstudio/images/videoicons/9ihYeC0YJ0M.jpg
rename to doc/qtcreator/images/extraimages/images/9ihYeC0YJ0M.jpg
diff --git a/doc/qtcreator/images/extraimages/images/RfEYO-5Mw6s.jpg b/doc/qtcreator/images/extraimages/images/RfEYO-5Mw6s.jpg
new file mode 100644
index 00000000000..fecd5b70efe
Binary files /dev/null and b/doc/qtcreator/images/extraimages/images/RfEYO-5Mw6s.jpg differ
diff --git a/doc/qtdesignstudio/images/videoicons/SsFWyUeAA_4.jpg b/doc/qtcreator/images/extraimages/images/SsFWyUeAA_4.jpg
similarity index 100%
rename from doc/qtdesignstudio/images/videoicons/SsFWyUeAA_4.jpg
rename to doc/qtcreator/images/extraimages/images/SsFWyUeAA_4.jpg
diff --git a/doc/qtdesignstudio/images/videoicons/ZzbucmQPU44.jpg b/doc/qtcreator/images/extraimages/images/ZzbucmQPU44.jpg
similarity index 100%
rename from doc/qtdesignstudio/images/videoicons/ZzbucmQPU44.jpg
rename to doc/qtcreator/images/extraimages/images/ZzbucmQPU44.jpg
diff --git a/doc/qtdesignstudio/images/videoicons/aV6kFxH3Xws.jpg b/doc/qtcreator/images/extraimages/images/aV6kFxH3Xws.jpg
similarity index 100%
rename from doc/qtdesignstudio/images/videoicons/aV6kFxH3Xws.jpg
rename to doc/qtcreator/images/extraimages/images/aV6kFxH3Xws.jpg
diff --git a/doc/config/images/commercial.png b/doc/qtcreator/images/extraimages/images/commercial.png
similarity index 100%
rename from doc/config/images/commercial.png
rename to doc/qtcreator/images/extraimages/images/commercial.png
diff --git a/doc/qtcreator/images/extraimages/images/yOUdg1o2KJM.jpg b/doc/qtcreator/images/extraimages/images/yOUdg1o2KJM.jpg
new file mode 100644
index 00000000000..684ebd58e9d
Binary files /dev/null and b/doc/qtcreator/images/extraimages/images/yOUdg1o2KJM.jpg differ
diff --git a/doc/qtcreator/images/extraimages/qtcreator-extraimages.qdocconf b/doc/qtcreator/images/extraimages/qtcreator-extraimages.qdocconf
new file mode 100644
index 00000000000..91688081176
--- /dev/null
+++ b/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
diff --git a/doc/qtcreator/images/extraimages/qtdesignstudio-extraimages.qdocconf b/doc/qtcreator/images/extraimages/qtdesignstudio-extraimages.qdocconf
new file mode 100644
index 00000000000..6578308433a
--- /dev/null
+++ b/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
diff --git a/doc/qtcreator/qtcreator-online.qdocconf b/doc/qtcreator/qtcreator-online.qdocconf
index 2a0ace23128..b96e6e53979 100644
--- a/doc/qtcreator/qtcreator-online.qdocconf
+++ b/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
diff --git a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc b/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
index 98059facac7..b64db4fdf5e 100644
--- a/doc/qtcreator/src/qtquick/qtquick-designer.qdoc
+++ b/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
 */
diff --git a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf b/doc/qtdesignstudio/config/qtdesignstudio.qdocconf
index 56c602c2540..cdb97676c2a 100644
--- a/doc/qtdesignstudio/config/qtdesignstudio.qdocconf
+++ b/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 \
diff --git a/doc/qtdesignstudio/qtdesignstudio-online.qdocconf b/doc/qtdesignstudio/qtdesignstudio-online.qdocconf
index 27121048cb6..5fc198cc452 100644
--- a/doc/qtdesignstudio/qtdesignstudio-online.qdocconf
+++ b/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