Deferred insertion media

Insert youtube:



<div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div>

Insert twitch:



<div data-insertmedia='{"type" : "twitch", "src" : "https://player.twitch.tv/?channel=playshelly", "setting" : "autoplay=true&muted=true&parent=get-web.site" }'> </div>

Insert html5 video:



<div data-insertmedia='{"type" : "html5", "src" : "https://get-web.site/uploads/files/2020-02/1580606556_freewarsgifts.mp4", "setting" : "controls autoplay loop muted"}'> </div>

Insert images:



<div data-insertmedia='{"type": "img", "src": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2015738/img-test.jfif", "width" : "100%", "height" : "auto"}'> </div>


Getting Started

i
Source code on GitHub

Install:

<script src="../src/insertmedia.js"></script>

Usage:

document.addEventListener("DOMContentLoaded", function () {
  insertmedia();
});

Use with options:

document.addEventListener("DOMContentLoaded", function () {   insertmedia({
    delay: 300, // delay. default: 300ms
    immediately: true, // performing a delay true/false. Immediately or one at a time every "delay" ms. default: true
    attr: 'data-insertmedia', // Processed attribute. default: data-insertmedia
  });
});

Add an attribute to the block where we insert the media:

data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'

Options:

type*: youtube , twitch , html5 , img

src*: resource url https://example.com/img.jpg

width: Width available for this type of media

height: Height available for this type of media

setting: Settings available for this type of media

(*) - required