Embed React app vs YouList – YouTube playlist shortcode

This is a simple way how to embed react application in to your post. In my blog, a wanted include small application, but typical react app is a single page app, hardly linked in index.html. He needed a simple way to solve it. The result is visible on my blog, for example: Embeding Google Photos album. How to do it You need compiled React app hosted on public url. Find filenames after building an application. If you using create-ract-app script, all what you need, find in “static” directory. Assemble file names into a shortcode like this: [reactapp id="root" js="pathto/static/js/main.000000.js" css="pathto/static/css/main.000000.css"] [reactapp id="custom_id" "pathto/static/js/main.000000.js" "pathto/static/css/main.000000.css" "pathto/static/css/another.css"] id – ID of application root element js[n] – path to Java script bundle css[n] – path to Stylesheet (files are detected automaticly by extension js/css) That’s all. When application was updated, you must setup new links to shortcode. If you want to more information about this plugin, you may visit Embedding a React Application to WordPress post post in my blog. 1.0.1 Release Date – 18 January 2019 Multiple script insert for new react build compatibility. 1.0.0 React application shortcode.

This plugin adds the shortcode [youlist] so you can easily embed YouTube™ playlist defined by playlist id (PL in front of the playlist id) comma seperated video ids list user favorites user uploads search query in a single YouTube™ player. Live demo New in version 1.0.6 show random playlists with the new attribute ‘randompid’ added apply_filters for output, style, class and src bug fix New in version 1.0.5 enable nocookies enable the https protocol play videos in a specific quality (fx. hd720) enable wmode to handle z-index issues. Usage Examples To embed a playlist with thumbnails [youlist pid=”PL3FF15AA7ED356D9F”] To embed three videos with thumbnails (comma seperated video id list): [youlist vid=”ZF_K8D414-Y,sFHXWoawnt0,E2uOGOqIyC4″] To embed three videos without thumbnails: [youlist vid=”ZF_K8D414-Y,sFHXWoawnt0,E2uOGOqIyC4″ showinfo=”0″] To embed a playlist from the search string “higgs boson” [youlist search=”higgs boson” width=”600″ height=”400″] To embed a random playlist [youlist randompid=”PL3FF15AA7ED356D9F, PL9AEE7FF9E83DEA62, PL2B8DB1BD4364033F”] To embed a playlist for all uploaded videos for the user “mismag822″ [youlist uid=”mismag822″ listtype=”user_uploads”] To embed a playlist for all favorite videos for the user “mismag822″ [youlist uid=”mismag822″ listtype=”user_favorites”] To embed a playlist width your own custom style [youlist pid=”PL3FF15AA7ED356D9F” style=”width:300px;height:400px;z-index:1;”] To embed a user playlist with all the supported attributes (default values shown): [youlist uid=”mismag822″ randompid=”” showinfo=”1″ width=”680″ height=”480″ class=”youlist” autohide=”2″ autoplay=”0″ disablekb=”0″ listtype=”user_uploads” theme=”dark” modestbranding=”1″ controls=”1″ color=”red” fs=”1″ rel=”1″ start=”0″ loop=”0″ iv_load_policy=”1″ version=”3″ style=”” vq=”” nocookie=”0″ https=”0″ wmode=”” parameters=”” ] Ideas for how to use this plugin You can use it to display ad-video before or after the main video You can have your own short trailer before the main video You can collect lessons/tutorials/music videos You can use it for your YouTube™ playlist You can watch your friends favourites videos You can collect videos for your kid and watch it on your site … etc … Shortcode Parameters The youList-shortcode is a wrapper for most of the YouTube™ iframe parameters described here: https://developers.google.com/youtube/player_parameters iframe parameters: width [integer] – iframe width in pixels height [integer] – iframe height in pixels class [string] – iframe css classname style [string] – iframe css custom style parameters [string] – custom source parameters (&param1=value1&…) youtube parameters: pid [string] – YouTube playlist ID uid [string] – YouTube user ID) vid [string] – Comma seperated YouTube Videos ID list randompid [string] – YouTube random playlist ID, from a comma seperated PID’s list listtype [playlist|user_uploads|search] – YouTube listtype search [string] – YouTube search string) theme [dark|light] – Dark or light control bar modestbranding [0|1] – Prevent the YouTube logo from displaying in the control bar showinfo [0|1] – Display thumbnail images for the videos in the playlist autohide [0|1|2] – Hide the video controls automatically after a video begins playing autoplay [0|1] – The initial video will autoplay when the player loads disablekb [0|1] – Disable the player keyboard controls controls [0|1|2] – Display the video player controls color [red|white] – The color in the video progress bar fs [0|1] – Display the fullscreen button rel [0|1] – Show related videos when playback of the initial video ends start [integer] – Play the video at the given number of seconds from the start of the video loop [0|1] – Play the entire playlist and then start again at the first video iv_load_policy [1|3] – Show video annotations version [2|3] – AS player version https [0|1] – Enable the https protocol nocookie [0|1] – No cookies thank you vq [small|medium|large|hd720|hd1080] – Change video quality