SocialMedia

Demo page for social-media embeds with the Canal\Assets GDPR DoubleClick enabled, on Twitter and Google Maps are some more features shown.

See PaintTheWeb - Canal Asset, Module GDPR for implementation info.

LazyLoad is currently enabled

Social
- Facebook
- Twitter
  - Example: feature auto_check_load
- Instagram Post
Media/Fun
- Giphy
  - has checkbox, label before checkbox, button
- Pinterest
  - has no checkbox, but label + button
- Tumblr (def.)
- 500px
  - has no checkbox, only button
Video
- YouTube
  - with native advanced privacy mode or default mode
- Vimeo
Audio
- Spotify
- Deezer
Cloud Platforms
- Office365
Location Service
- Google Maps
  - Example: feature auto_check
Dev. Pages
Other Pages/Embed Possibilities
- Fake Embed

Social Platforms

Facebook

Post

Twitter

Feature `auto_check_load`: Twitter is configured to load all elements after you have loaded one.

Picture Tweet

Video Tweet

Timeline

Instagram

Video Platforms

YouTube

Video, normal

Video, advanced privacy

Vimeo

Media/Fun Platforms

Giphy

has checkbox, label before checkbox, button

has no checkbox, but label + button

Board

Profile

Tumblr

Currently Tumblr throws an X-FRAME denied, even when using native embed code. Thous not working.

Native means not from js generated, the js uses tumblr SDK and this creates the not working iframe.

500px

has no checkbox, only button

Audio Platforms

Spotify

Deezer

Playlist

Album

Track

Podcast

Episodes

Mix, having no user-link/default-link

Artist

Charts, also no user-link

Cloud Platforms

Office365 Embed

PowerPoint

Word

Excel

OneNote

Seems not to be possible to embed a notebook in view mode.

Excel Survey

Folder

Location Services

Google Maps

Feature `auto_check`: Google Maps is configured to check and hide the checkbox inside the barrier after first one was loaded.

And another one but without borders, with preview image as `img`

And another one but without borders, with preview image as `style` `background`

And another one but without borders, with preview image as `style` `background` and preview html

Developer Pages

JSFiddle

SassMeister

CodePen

GitHub

Other Embed Pages

FakeEmbed

Some Bottom Padding

Opening-Effects have been optimized to work no matter how, but when there is more space on the bottom, the opening effect is better visible, so this text just pushes the page higher to have every item in the center of an page. Oh or the next p's are here for that pushing.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.