About
This plugin is developed for TheDesignOrder website in the 2023 revamp project. it provides a shortcode to display a youtube video to serve as a background video.
This plugin allows the video to play continuously in a loop, remove recommeded vides and hide the YT logo and all controls. To achieve the hiding of the YT stuff, it enlarges the video by 3 times so that the YT stuff are outside the viewport. Seams that this enlargement approach is the only solution for hiding the YT signatures.
The shortcode is:
[ivr_ytube_embed vid='xxx' class='css_class']This plugin accepts the following parameters:
- vid (required) = the youTube video ID
- class (optional) = CSS class name.
Key Operations
- At the ‘ini’ hook, registers these css and js files:
- /public/css/ivr-ytube_embed-style.css
- /public/js/ivr-ytube_embed-script.js
- At the ‘wp_enqueue_scripts’ hook, enqueue the above files.
- Register the shortcode using the function add_shortcode(‘ivr_ytube_embed’, ‘fn_ytube_embed’);
Points to Note
- When CSS files have the same name in two different plugins, they will conflict with each other. Therefore they must use different names. The same applies to JS file. (To be checked)
- Iframe parameters to autoplay, and loop continuously:
<iframe width='560' height='315' src='https://www.youtube.com/embed/$videoID?autoplay=1&mute=1&playsinline=1&loop=1&playlist=$videoID&controls=0&showinfo=0&disablekb=1' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
- CSS to hide player controls and YT logo:
- The iframe is extended to 300% of its container but the video within the iframe maintains its ratio of 16:9. This makes the video sitting in the middle of the iframe occupying 100% of the iframe width. The video titles sits within the left 100%, buttons and the YT logo sits within the right 100%.
- The margin-left -100% moves the video to the left edge of the container.
- The overflow hidden makes the title, buttons and YT logo invisible.
- The pointer-events none disables any mouse action.
.cu-portf-part-ytube-container {
overflow: hidden;
width: 100%;
aspect-ratio: 16/9;
pointer-events: none;
}
.cu-portf-part-ytube-container iframe {
width: 300%;
height: 100%;
margin-left: -100%;
}
Folders and Files Location
The plugin folders and files are located in mj1900\doc\projs\60-tf-practice\14-plugins-Dev\48-ivr-ytube_embed.
Version History
| Ver. | Rel Date | Remark |
| 1.1.0 | 2023-07-10 | 1. CSS class can be added via the optional plugin parameter. |
| 1.0.0 | 2023-07-09 | First release |