Sample videos with colored FRAMES around the video are shown below.
The colors, type, and size of the borders are determined in the CSS section of your wordpress CUSTOMIZER.
Get the embed codes from the specific video website. Example videos from (You Tube, Rumble, Odyssey, and Bitchute are shown below. Codes are usually under EMBED or SHARE of the video website. You are looking for IFRAME code.
Copy the code and paste it on a page or post.
Then, ADD this to the code to your CUSTOM CSS in your WordPress customizer:
.frame-border {border:3pxsolid#EEE;}
That code will change ALL add a same border around all video iframes (Embeds). The benefit of using a single CSS class is that if you change themes later, then you can easily change the colors with one click vs going back and editing each video individually.
Here is how you embed a You Tube video, just put in the CSS class (class=”frame-border). Example is below:
<iframe class=”frame-border” width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>
If you just want to do one video with a frame, just put in the STYLE as shown below:
<iframe style=”border: 3px solid #EEE;” width=”560″ height=”315″ src=”https://www.youtube.com/embed/qzOOy1tWBCg” frameborder=”0″ allowfullscreen></iframe>
More information and examples are given on this webpage:
https://www.wpbeginner.com/wp-tutorials/how-to-add-an-iframe-border-around-a-video-embed/
CSS Color NAMES are on this webpage:
https://www.quackit.com/css/css_color_codes.cfm#google_vignette
CSS Border STYLES are on this webpage:
https://www.w3schools.com/css/css_border.asp
For the videos below we put this CSS code into our wordpress CUSTOMIZER:
.frame-border {
border:13px double maroon;
}
Enjoy this cool little tip, and have better looking video iframes/embeds!
Youtube Video:
Rumble Video
Odysee Video
Bitchute Video
