Embedding Video on Homepage


(Safa Faheem) #1

I’m trying to figure out how to embed a video on the homepage of a Discourse site I am an admin on. When I go to Admin settings, I see “Text Content” which contains the wording for what is shown on the Welcome page and “HTML/CSS”, which I can use to embed a video but it does it on BOTH the homepage and the forum that shows after I login. I only want to embed a video on the homepage. How do I do that?


(Simon Cossar) #2

You can embed a video in the login_required_welcome_message text that will only show on the login page. Is that the one you want?

The trick is that you have to whitelist the iframe in a plugin. Here’s an example plugin for how to do it:
GitHub - scossar/whitelist-iframe: Discourse plugin to add urls to Discourse.Markdown._validIframes. It would take a bit of work to get it looking good. But it could be done :slight_smile:


(Safa Faheem) #3

Thanks for the response, Simon. I will try it tonight.

Also, I wanted to ask if maybe you know, right now for the video I have that is showing on both pages, when I press Login on the homepage it shows up BEHIND the video. Meaning, the video overlays the Login dialogue box and it covers the fields where people type in their username and password. For some reason, that only occurs on Internet Explorer though. Any thoughts to get around this? Your suggested idea for embedding the video might fix this too but just in case, I wanted to ask this as a separate issue.


(Simon Cossar) #4

[quote=“Safa_Faheem, post:3, topic:39196”]
that only occurs on Internet Explorer though
[/quote] :grinning:

I’m not sure. I don’t have anything to test it on. I’m curious if the same thing will happen with the way I’m doing it.


edit: This is a known issue with Internet Explorer, Youtube iframes, and modal windows. Here’s some info about it css - YouTube Video Embedded via iframe Ignoring z-index? - Stack Overflow

The solution seems to be to add the parameter wmode=transparent to the iframe’s src attribute.


(Safa Faheem) #5

Alright, I will try it and let you know.

If it is not too much work, could you please give me step by step instructions on whitelisting iframe in my plugin file, as you did with the footer? Sorry to be so much of a noob. :blush:


(Simon Cossar) #6

Sure, no problem. It’s good to know what makes sense to people.

First you need to read this topic: How to install a plugin .

You then install this plugin: GitHub - scossar/whitelist-iframe: Discourse plugin to add urls to Discourse.Markdown._validIframes following the instructions from the ‘How to install a plugin’ topic. The reason you need that plugin is because when Discourse processes a post it removes some html tags. One of the tags it removes is the <iframe>. This plugin tells it to allow certain iframe tags (freesound, soundcloud, nytimes video, and youtube).

Once the plugin is installed go to admin>customize>text content:

In the searchbox on that page enter: login_required.welcome_message That is the name of the text content on the login page. That should bring you to a screen that looks something like this:

Click on the ‘edit’ button. Here is what I have entered in that box:

Hi, this is a test to see if it is possible to embed a video on the login page.

<iframe width="420" height="315" src="https://www.youtube.com/embed/uhFIupVoVKc?rel=0" frameborder="0" allowfullscreen></iframe>

Yes it is! The trick is that you have to embed it in an iframe - links here are not being oneboxed.

The iframe it copied from the Youtube share settings (click ‘share’ and then ‘embed’ on the Youtube page.)

Adding some text under the iframe pushes the login buttons down and makes everything look a bit better. This could be made to look really good. It’s a nice idea for a site that requires login to see the content.


(Safa Faheem) #7

Thanks a million! Will give it a go tonight and let you know.


(Safa Faheem) #8

Simon,

After I did the rebuild app line for installing the plugin, I was presented with the following line. If you need more of the error message, let me know. Any thoughts? :confused:

Safa

FAILED
--------------------
RuntimeError: cd /var/www/discourse && su discourse -c 'bundle install --deployment --verbose --without test --

without development' failed with return #<Process::Status: pid 297 exit 5>
Location of failure: /pups/lib/pups/exec_command.rb:105:in `spawn'
exec failed with the params {"cd"=>"$home", "hook"=>"bundle_exec", "cmd"=>["su discourse -c 'bundle install --

deployment --verbose --without test --without development'", "su discourse -c 'bundle exec rake db:migrate'", "su 

discourse -c 'bundle exec rake assets:precompile'"]}
6eead475e2c3ecc9dae5be0bca3d3da7a4f3f939d6e7365638e12bc301f05515
** FAILED TO BOOTSTRAP ** please scroll up and look for earlier error messages, there may be more than one

(Simon Cossar) #9

My guess is that you have a mistake in your yaml file app.yml. It’s important that the indentation on that is correct. You have to use spaces and not tabs. If you don’t get it working can you paste in more of the error message? Also it would be good to see the part of your app.yml file that you have edited.

The part of the app.yml file that you edit should look like this:

hooks:
  after_code:
    - exec:
        cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
          - git clone https://github.com/scossar/whitelist-iframe

(Safa Faheem) #10

Thanks for your fast response. This might be overkill but here’s more of the error:

Running 'compile' for libxml2 2.9.2... ERROR, review '/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/compile.log' to see what happened. Last lines are:
========================================================================
Making all in .
make[3]: Entering directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc'
make[3]: Nothing to be done for `all-am'.
make[3]: Leaving directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc'
Making all in devhelp
make[3]: Entering directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc/devhelp'
make[3]: Nothing to be done for `all'.
make[3]: Leaving directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc/devhelp'
Making all in examples
make[3]: Entering directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc/examples'
  CC       io1.o
  CCLD     io1
collect2: error: ld returned 1 exit status
make[3]: *** [io1] Error 1
make[3]: Leaving directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc/examples'
make[2]: *** [all-recursive] Error 1
make[2]: Leaving directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2/doc'
make[1]: *** [all-recursive] Error 1
make[1]: Leaving directory `/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2/ext/nokogiri/tmp/x86_64-unknown-linux-gnu/ports/libxml2/2.9.2/libxml2-2.9.2'
make: *** [all] Error 2
========================================================================
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/usr/local/bin/ruby
        --help
        --clean
        --use-system-libraries
        --enable-static
        --disable-static
        --with-zlib-dir
        --without-zlib-dir
        --with-zlib-include
        --without-zlib-include=${zlib-dir}/include
        --with-zlib-lib
        --without-zlib-lib=${zlib-dir}/lib
        --enable-cross-build
        --disable-cross-build
/var/www/discourse/vendor/bundle/ruby/2.0.0/gems/mini_portile2-2.0.0/lib/mini_portile2/mini_portile.rb:366:in `block in execute': Failed to complete compile task (RuntimeError)
        from /var/www/discourse/vendor/bundle/ruby/2.0.0/gems/mini_portile2-2.0.0/lib/mini_portile2/mini_portile.rb:337:in `chdir'
        from /var/www/discourse/vendor/bundle/ruby/2.0.0/gems/mini_portile2-2.0.0/lib/mini_portile2/mini_portile.rb:337:in `execute'
        from /var/www/discourse/vendor/bundle/ruby/2.0.0/gems/mini_portile2-2.0.0/lib/mini_portile2/mini_portile.rb:111:in `compile'
        from /var/www/discourse/vendor/bundle/ruby/2.0.0/gems/mini_portile2-2.0.0/lib/mini_portile2/mini_portile.rb:150:in `cook'
        from extconf.rb:289:in `block (2 levels) in process_recipe'
        from extconf.rb:182:in `block in chdir_for_build'
        from extconf.rb:181:in `chdir'
        from extconf.rb:181:in `chdir_for_build'
        from extconf.rb:288:in `block in process_recipe'
        from extconf.rb:187:in `tap'
        from extconf.rb:187:in `process_recipe'
        from extconf.rb:478:in `<main>'

extconf failed, exit code 1

Gem files will remain installed in /var/www/discourse/vendor/bundle/ruby/2.0.0/gems/nokogiri-1.6.7.2 for inspection.
Results logged to /var/www/discourse/vendor/bundle/ruby/2.0.0/extensions/x86_64-linux/2.0.0-static/nokogiri-1.6.7.2/gem_make.out
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:89:in `run'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/ext_conf_builder.rb:36:in `block in build'
/usr/local/lib/ruby/2.0.0/tempfile.rb:324:in `open'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/ext_conf_builder.rb:19:in `build'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:161:in `block (2 levels) in build_extension'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:160:in `chdir'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:160:in `block in build_extension'
/usr/local/lib/ruby/2.0.0/monitor.rb:211:in `mon_synchronize'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:159:in `build_extension'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:198:in `block in build_extensions'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:195:in `each'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/ext/builder.rb:195:in `build_extensions'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/installer.rb:702:in `build_extensions'
/usr/local/lib/ruby/site_ruby/2.0.0/rubygems/installer.rb:250:in `install'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/source/rubygems.rb:142:in `block in install'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/rubygems_integration.rb:151:in `preserve_paths'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/source/rubygems.rb:134:in `install'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/installer/gem_installer.rb:56:in `install'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/installer/gem_installer.rb:14:in `install_from_spec'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/installer/parallel_installer.rb:90:in `block in worker_pool'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/worker.rb:55:in `call'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/worker.rb:55:in `apply_func'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/worker.rb:50:in `block in process_queue'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/worker.rb:47:in `loop'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/worker.rb:47:in `process_queue'
/usr/local/lib/ruby/gems/2.0.0/gems/bundler-1.11.2/lib/bundler/worker.rb:22:in `block (2 levels) in initialize'
Using rack-test 0.6.3
0:  rack-test (0.6.3) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rack-test-0.6.3.gemspec
Installing rack-mini-profiler 0.9.8
Using rack-protection 1.5.3
0:  rack-protection (1.5.3) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rack-protection-1.5.3.gemspec
Using barber 0.9.0
0:  barber (0.9.0) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/barber-0.9.0.gemspec
Using ember-data-source 1.0.0.beta.16.1
0:  ember-data-source (1.0.0.beta.16.1) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/ember-data-source-1.0.0.beta.16.1.gemspec
Using unf 0.1.4
0:  unf (0.1.4) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/unf-0.1.4.gemspec
Using sprockets 2.11.0
0:  sprockets (2.11.0) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/sprockets-2.11.0.gemspec
Using rb-inotify 0.9.5
0:  rb-inotify (0.9.5) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rb-inotify-0.9.5.gemspec
Using image_optim 0.20.2
0:  image_optim (0.20.2) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/image_optim-0.20.2.gemspec
Using mocha 1.1.0
0:  mocha (1.1.0) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/mocha-1.1.0.gemspec
Using rack-openid 1.3.1
0:  rack-openid (1.3.1) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rack-openid-1.3.1.gemspec
Using openid-redis-store 0.0.2
0:  openid-redis-store (0.0.2) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/openid-redis-store-0.0.2.gemspec
Using rbtrace 0.4.7
0:  rbtrace (0.4.7) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rbtrace-0.4.7.gemspec
Using therubyracer 0.12.2
0:  therubyracer (0.12.2) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/therubyracer-0.12.2.gemspec
Using rspec-core 3.2.3
0:  rspec-core (3.2.3) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rspec-core-3.2.3.gemspec
Using rspec-expectations 3.2.1
0:  rspec-expectations (3.2.1) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rspec-expectations-3.2.1.gemspec
Using rspec-mocks 3.2.1
0:  rspec-mocks (3.2.1) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/rspec-mocks-3.2.1.gemspec
Using fast_stack 0.1.0
0:  fast_stack (0.1.0) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/fast_stack-0.1.0.gemspec
Using fast_xor 1.1.3
0:  fast_xor (1.1.3) from /var/www/discourse/vendor/bundle/ruby/2.0.0/specifications/fast_xor-1.1.3.gemspec
An error occurred while installing nokogiri (1.6.7.2), and Bundler cannot
continue.
Make sure that `gem install nokogiri -v '1.6.7.2'` succeeds before bundling.

I, [2016-02-09T03:46:05.371397 #43]  INFO -- : Terminating async processes
I, [2016-02-09T03:46:05.371583 #43]  INFO -- : Sending INT to HOME=/var/lib/postgresql USER=postgres exec chpst -u postgres:postgres:ssl-cert -U postgres:postgres:ssl-cert /usr/lib/postgresql/9.3/bin/postmaster -D /etc/postgresql/9.3/main pid: 72
2016-02-09 03:46:05 UTC [72-2] LOG:  received fast shutdown request
2016-02-09 03:46:05 UTC [72-3] LOG:  aborting any active transactions
2016-02-09 03:46:05 UTC [79-2] LOG:  autovacuum launcher shutting down
200:signal-handler (1454989565) Received SIGTERM scheduling shutdown...
2016-02-09 03:46:05 UTC [76-1] LOG:  shutting down
I, [2016-02-09T03:46:05.383597 #43]  INFO -- : Sending TERM to exec chpst -u redis -U redis /usr/bin/redis-server /etc/redis/redis.conf pid: 200
2016-02-09 03:46:05 UTC [76-2] LOG:  database system is shut down
2016-02-09 03:46:05 UTC [80-1] LOG:  could not close temporary statistics file "pg_stat/db_12068.tmp": No space left on device
2016-02-09 03:46:05 UTC [80-2] LOG:  could not write temporary statistics file "pg_stat/db_16384.tmp": No space left on device
2016-02-09 03:46:05 UTC [80-3] LOG:  could not close temporary statistics file "pg_stat/db_1.tmp": No space left on device
2016-02-09 03:46:05 UTC [80-4] LOG:  could not close temporary statistics file "pg_stat/db_0.tmp": No space left on device


FAILED
--------------------
RuntimeError: cd /var/www/discourse && su discourse -c 'bundle install --deployment --verbose --without test --without development' failed with return #<Process::Status: pid 297 exit 5>
Location of failure: /pups/lib/pups/exec_command.rb:105:in `spawn'
exec failed with the params {"cd"=>"$home", "hook"=>"bundle_exec", "cmd"=>["su discourse -c 'bundle install --deployment --verbose --without test --without development'", "su discourse -c 'bundle exec rake db:migrate'", "su discourse -c 'bundle exec rake assets:precompile'"]}
6eead475e2c3ecc9dae5be0bca3d3da7a4f3f939d6e7365638e12bc301f05515
** FAILED TO BOOTSTRAP ** please scroll up and look for earlier error messages, there may be more than one

(Safa Faheem) #11

Hmm, this may be a dumb question, but where would I go to update the app.yml? (My first time doing things like this if it is not obvious…)

I did this in GIT Bash and when I ran this, this is when I got the error:

Was I supposed to run the commands elsewhere?

I really appreciate all of your help. Thank you so much again!


(Kane York) #12

Wait, what? You shouldn’t need to whitelist an iframe to use a YouTube embed if the text is going through the post processing. And if it’s not going through the post processing, you do need an iframe but there’s no need to whitelist it.


(Simon Cossar) #13

Yeah, that’s what I thought, but it doesn’t seem to work that way. The text is being processed by markdown.js but not being oneboxed.


(Simon Cossar) #14

It seems to be failing here:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/dialects/onebox_dialect.js#L69

I guess Discourse.Onebox isn’t defined at that point.


(xhb) #15

@Simon_Cossar i install that plugin with the latest master branch code , and i seems don’t work…
can you fix it ?


(Simon Cossar) #16

What doesn’t work? Is there a specific iframe you are trying to include?


(xhb) #17

yes, it is.

this api is deprecated, and has been moved to ‘pretty-text/sanitizer’

Discourse.Markdown.whiteListIframe();

i try something like this

(function() {
  obj = require('pretty-text/sanitizer');
  obj.whiteListIframe(/^(https?:)?\/\/v\.qq\.com\/.+/i);
})();

but it only work for the markdown editor preview, when i post it to server , it disappear in div cooked…


(Simon Cossar) #18

Thanks for looking at that. I’ll sort it out as soon as possible.