diff --git a/.gitignore b/.gitignore index c300c925e6..79e892f73a 100755 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,6 @@ Gemfile.lock .jekyll-metadata *ads.txt.bkp* .sass-cache + +# Files generated by `npm install` +node_modules/ diff --git a/.sass-cache/a8ae1fbf8fe3cf0ae44282e4f927a25624204c54/main.scssc b/.sass-cache/a8ae1fbf8fe3cf0ae44282e4f927a25624204c54/main.scssc new file mode 100644 index 0000000000..6db4f74c3a Binary files /dev/null and b/.sass-cache/a8ae1fbf8fe3cf0ae44282e4f927a25624204c54/main.scssc differ diff --git a/Gemfile b/Gemfile index a0483f2507..cdaf1cdfe5 100755 --- a/Gemfile +++ b/Gemfile @@ -1,2 +1,2 @@ source 'https://rubygems.org' -gem 'github-pages', '>= 30' \ No newline at end of file +gem 'github-pages', '>= 30' diff --git a/README.md b/README.md index 8bf538b48f..b63ccaf775 100755 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ The site uses [Jekyll](https://jekyllrb.com/), which is written in the [Ruby](ht For CSS, the site uses Laravel Mix to build CSS from Sass (scss-flavored) source files. Under the hood Laravel Mix uses Webpack. 1. follow the instructions at https://nodejs.dev to install Node.js for your OS -1. `npm install` to install packages for building assets +1. `npm ci` to install packages for building assets 1. build assets as described below diff --git a/_data/sidebar.yml b/_data/sidebar.yml index 1e5e598541..27cea0a38e 100644 --- a/_data/sidebar.yml +++ b/_data/sidebar.yml @@ -234,6 +234,15 @@ isSectionHeader: 0 sectionTitle: subgroup: 1 + +- sbSecId: 1 + title: Meta Bid Filtering + link: /dev-docs/examples/meta-bid-filtering.html + Item: 1 + isHeader: 0 + isSectionHeader: 0 + sectionTitle: + subgroup: 1 - sbSecId: 1 title: Troubleshooting @@ -1713,6 +1722,14 @@ sectionTitle: subgroup: 3 +- sbSecId: 5 + title: Programmatic Guaranteed + link: /prebid-server/features/pg/pbs-pg-idx.html + isHeader: 0 + isSectionHeader: 0 + sectionTitle: + subgroup: 3 + - sbSecId: 5 title: Developers link: @@ -2022,3 +2039,41 @@ isSectionHeader: 0 sectionTitle: subgroup: 0 + +#-------------- Prebid Identity --------------| + +- sbSecId: 9 + title: + link: + isHeader: 0 + isSectionHeader: 1 + sectionTitle: Prebid Identity + sectionId: prebid-identity + subgroup: 1000 + sbCollapseId: prebid-identity + +- sbSecId: 9 + title: invis + link: + isHeader: 1 + headerId: invis + isSectionHeader: 0 + sectionTitle: + subgroup: 0 + +- sbSecId: 9 + title: Identity Overview + link: /identity/prebid-identity.html + isHeader: 0 + isSectionHeader: 0 + sectionTitle: + subgroup: 0 + +- sbSecId: 9 + title: SharedID + link: /identity/sharedid.html + isHeader: 0 + isSectionHeader: 0 + sectionTitle: + subgroup: 0 + diff --git a/_includes/adops/adops-gam-video-setup.html b/_includes/adops/adops-gam-video-setup.html index b8091311fc..1825186ccd 100644 --- a/_includes/adops/adops-gam-video-setup.html +++ b/_includes/adops/adops-gam-video-setup.html @@ -39,16 +39,11 @@

Line Item Setup

Creative Setup

When setting up video creatives, it's important to understand where the VAST XML is stored for each of your bidders. The most common place to store VAST XML is AppNexus' cache, but some bidders (such as RubiconProject and SpotX) use their own cache services. To support such -bidders, you will need to choose one of the following approaches: -
+bidders, see the Multiple Cache Locations instructions below.

Single Cache Location

-If you only use bidders that provide full VAST responses, no special setup is needed. Otherwise, do the following: +If you only use bidders that provide full VAST responses, do the following:

1. For each line item you create, click on the Creatives tab, click the ADD CREATIVE button, and choose the size you're entering.

@@ -75,12 +70,15 @@

Single Cache Location

URL failed. This is expected, since the creative URL above points to a server-side asset cache hosted by Prebid Server.

-

4. Set the Duration to 1.

+

4. Set the Duration to the max length of video ads you serve. If you don't know what the max length is, set it to 30.

+ +

In the past Prebid used to recommend setting duration to 0 or 1, but GAM now requires that this field reflect the actual video ad length. Since ads flowing through header bidding are going to differ in length, choose a value that matches a common ad length like 15 or 30.

The resulting creative should look something like the following:

Google Ad Manager Video Creative Setup

+

Multiple Cache Locations

If you're utilizing any bidders that cache their own VAST, you have two options: diff --git a/_includes/video/pb-cp-fp.html b/_includes/video/pb-cp-fp.html index 0444eaa4b5..f4b5cfe875 100644 --- a/_includes/video/pb-cp-fp.html +++ b/_includes/video/pb-cp-fp.html @@ -32,18 +32,19 @@ sizes: [640,480], mediaTypes: { video: { - context: "instream" + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexus', params: { - placementId: '13232361', // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: '13232361' // Add your own placement id here } } ] diff --git a/_includes/video/pb-cp-jw.html b/_includes/video/pb-cp-jw.html index 5022a065ce..566fefd3e3 100644 --- a/_includes/video/pb-cp-jw.html +++ b/_includes/video/pb-cp-jw.html @@ -14,18 +14,19 @@ sizes: [640,480], mediaTypes: { video: { - context: "instream" + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexus', params: { - placementId: '13232361', // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: '13232361' // Add your own placement id here } } ] diff --git a/_includes/video/pb-cp-kl.html b/_includes/video/pb-cp-kl.html index 550acf1c26..424012f23b 100644 --- a/_includes/video/pb-cp-kl.html +++ b/_includes/video/pb-cp-kl.html @@ -15,18 +15,19 @@ sizes: [640,480], mediaTypes: { video: { - context: "instream" + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexus', params: { - placementId: '13232361', // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: '13232361' // Add your own placement id here } } ] diff --git a/_includes/video/pb-cp-vjs.html b/_includes/video/pb-cp-vjs.html index ace1da2c41..3e7689ac10 100644 --- a/_includes/video/pb-cp-vjs.html +++ b/_includes/video/pb-cp-vjs.html @@ -21,18 +21,19 @@ sizes: [640,480], mediaTypes: { video: { - context: "instream" + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexus', params: { - placementId: '13232361', // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: '13232361' // Add your own placement id here } } ] diff --git a/_includes/video/pb-is-amp.html b/_includes/video/pb-is-amp.html index cd06ed2dac..b3cc436870 100644 --- a/_includes/video/pb-is-amp.html +++ b/_includes/video/pb-is-amp.html @@ -21,18 +21,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here } }] }; diff --git a/_includes/video/pb-is-app.html b/_includes/video/pb-is-app.html index ee2fbadfe8..710fedf75f 100644 --- a/_includes/video/pb-is-app.html +++ b/_includes/video/pb-is-app.html @@ -22,18 +22,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here
- video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here
} }] }; diff --git a/_includes/video/pb-is-bc.html b/_includes/video/pb-is-bc.html index 936a0714fe..0c53878f4a 100644 --- a/_includes/video/pb-is-bc.html +++ b/_includes/video/pb-is-bc.html @@ -36,18 +36,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: iosDevice ? 13239390 : 13232361, // Add your own placement id here. Note, skippable video is not supported on iOS - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: iosDevice ? 13239390 : 13232361 // Add your own placement id here. } }] }; diff --git a/_includes/video/pb-is-br.html b/_includes/video/pb-is-br.html index 01f73abc68..57f9c2ca54 100644 --- a/_includes/video/pb-is-br.html +++ b/_includes/video/pb-is-br.html @@ -29,18 +29,19 @@ sizes: [640,480], mediaTypes: { video: { - context: "instream" + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexusAst', params: { - placementId: '13232361', // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: '13232361' // Add your own placement id here } } ] diff --git a/_includes/video/pb-is-fp.html b/_includes/video/pb-is-fp.html index c8a8174ffe..8f79f4f4f8 100644 --- a/_includes/video/pb-is-fp.html +++ b/_includes/video/pb-is-fp.html @@ -55,18 +55,19 @@ sizes: [640,480], mediaTypes: { video: { - context: "instream" + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexus', params: { - placementId: '13232361', // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: '13232361' // Add your own placement id here } } ] diff --git a/_includes/video/pb-is-jw01.html b/_includes/video/pb-is-jw01.html index 8d7f8a1e1b..ce30dd1c7e 100644 --- a/_includes/video/pb-is-jw01.html +++ b/_includes/video/pb-is-jw01.html @@ -24,18 +24,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here } }] }; diff --git a/_includes/video/pb-is-jw02.html b/_includes/video/pb-is-jw02.html index 3f4edb0865..09c498ba4a 100644 --- a/_includes/video/pb-is-jw02.html +++ b/_includes/video/pb-is-jw02.html @@ -28,18 +28,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here - video: { - skipppable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here } }] }; diff --git a/_includes/video/pb-is-kl.html b/_includes/video/pb-is-kl.html index 0a5c440ec9..3aa790f73c 100644 --- a/_includes/video/pb-is-kl.html +++ b/_includes/video/pb-is-kl.html @@ -42,18 +42,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement ID here - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement ID here } }] }; diff --git a/_includes/video/pb-is-ol.html b/_includes/video/pb-is-ol.html index 8a275bb4a9..8508fc3d19 100644 --- a/_includes/video/pb-is-ol.html +++ b/_includes/video/pb-is-ol.html @@ -66,18 +66,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: iosDevice ? 13239390 : 13232361, - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: iosDevice ? 13239390 : 13232361 } }] }; diff --git a/_includes/video/pb-is-vjs.html b/_includes/video/pb-is-vjs.html index 483bcad30f..1d928f4bc4 100644 --- a/_includes/video/pb-is-vjs.html +++ b/_includes/video/pb-is-vjs.html @@ -26,18 +26,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream' + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 } }] }; diff --git a/_includes/video/pb-os-dfp.html b/_includes/video/pb-os-dfp.html index ff5aa40f0c..39dd69f517 100644 --- a/_includes/video/pb-os-dfp.html +++ b/_includes/video/pb-os-dfp.html @@ -23,19 +23,19 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], context: 'outstream' + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [ { bidder: 'appnexus', params: { - placementId: 13232385, - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232385 } } ] diff --git a/_includes/video/pb-os-nas.html b/_includes/video/pb-os-nas.html index ea94495c0c..51bebd75aa 100644 --- a/_includes/video/pb-os-nas.html +++ b/_includes/video/pb-os-nas.html @@ -17,18 +17,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'outstream' + context: 'outstream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232385, - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232385 } }] }]; diff --git a/_includes/video/pbs-br.html b/_includes/video/pbs-br.html index 845e7aa6b2..f1f2294f55 100644 --- a/_includes/video/pbs-br.html +++ b/_includes/video/pbs-br.html @@ -39,21 +39,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream', - mimes: ['video/mp4'], - protocols: [1, 2, 3, 4, 5, 6, 7, 8], - playbackmethod: [2] + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here } }] }; @@ -66,7 +63,6 @@ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, - debug: true, enableSendAllBids: true, s2sConfig: { endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', diff --git a/_includes/video/pbs-jw01.html b/_includes/video/pbs-jw01.html index 1b49546f54..bd40af8000 100644 --- a/_includes/video/pbs-jw01.html +++ b/_includes/video/pbs-jw01.html @@ -33,21 +33,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream', - mimes: ['video/mp4'], - protocols: [1, 2, 3, 4, 5, 6, 7, 8], - playbackmethod: [2] + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here. - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here. } }] }; @@ -60,7 +57,6 @@ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, - debug: true, s2sConfig: { endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', enabled: true, diff --git a/_includes/video/pbs-jw02.html b/_includes/video/pbs-jw02.html index f23c1111e8..da4a45d0f5 100644 --- a/_includes/video/pbs-jw02.html +++ b/_includes/video/pbs-jw02.html @@ -43,21 +43,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream', - mimes: ['video/mp4'], - protocols: [1, 2, 3, 4, 5, 6, 7, 8], - playbackmethod: [2] + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here } }] }; @@ -70,7 +67,6 @@ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, - debug: true, enableSendAllBids: true, s2sConfig: { endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', diff --git a/_includes/video/pbs-kl.html b/_includes/video/pbs-kl.html index bd1488402f..19d842bc59 100644 --- a/_includes/video/pbs-kl.html +++ b/_includes/video/pbs-kl.html @@ -38,21 +38,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream', - mimes: ['video/mp4'], - protocols: [1, 2, 3, 4, 5, 6, 7, 8], - playbackmethod: [2] + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here. - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here. } }] }; @@ -65,7 +62,6 @@ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, - debug: true, s2sConfig: { endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', enabled: true, diff --git a/_includes/video/pbs-oy.html b/_includes/video/pbs-oy.html index fdb8cd6629..73a73206aa 100644 --- a/_includes/video/pbs-oy.html +++ b/_includes/video/pbs-oy.html @@ -72,17 +72,14 @@ context: 'instream', mimes: ['video/mp4'], protocols: [1, 2, 3, 4, 5, 6, 7, 8], - playbackmethod: [2] + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here. - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here. } }] }; @@ -95,7 +92,6 @@ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, - debug: true, s2sConfig: { endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', enabled: true, diff --git a/_includes/video/pbs-vjs.html b/_includes/video/pbs-vjs.html index 515ff8e426..4619df3be2 100644 --- a/_includes/video/pbs-vjs.html +++ b/_includes/video/pbs-vjs.html @@ -48,21 +48,18 @@ code: 'video1', mediaTypes: { video: { - playerSize: [640, 480], - context: 'instream', - mimes: ['video/mp4'], - protocols: [1, 2, 3, 4, 5, 6], - playbackmethod: [2] + context: 'instream', + playerSize: [640, 480], + mimes: ['video/mp4'], + protocols: [1, 2, 3, 4, 5, 6, 7, 8], + playbackmethod: [2], + skip: 1 } }, bids: [{ bidder: 'appnexus', params: { - placementId: 13232361, // Add your own placement id here. - video: { - skippable: true, - playback_method: ['auto_play_sound_off'] - } + placementId: 13232361 // Add your own placement id here. } }] }; @@ -75,7 +72,6 @@ cache: { url: 'https://prebid.adnxs.com/pbc/v1/cache' }, - debug: true, s2sConfig: { endpoint: 'https://prebid.adnxs.com/pbs/v1/openrtb2/auction', enabled: true, diff --git a/_layouts/example.html b/_layouts/example.html index dc97cef97a..c917458838 100644 --- a/_layouts/example.html +++ b/_layouts/example.html @@ -43,19 +43,11 @@

This page contains:

-

- On the JSFiddle example below, click Result to see the result. -

- -

- Click Edit in JSFiddle to open the example in a new tab. -

-

For tips and troubleshooting info, see: