Video parent

The nuevo shortcode features a “parent” parameter. Parent is the ID name of the custom HTML element in which the player will be nested. You can set any CSS style to such an element. In the example above we used parent id=”c70.” The CSS for this element is:

#c70 {
   width: 70%;
   margin: 0 auto;
   padding: 10px;   
   background-color: aqua;
   border-radius: 8px;
}
@media screen and (max-width: 480px) {
   #c70 {width: 100%;}
}

So the video player is nested in a 70% width element, centered horizontally, with 10px padding, an aqua background color, and a rounded border (8px). Additionally, the CSS rule for the “c70” container causes it to be 100% wide for screens less than 480px wide. The shortcode for video is like this:

[nuevo parent="c70" source="src=//video.mp4 type=video/mp4" poster="//poster-image-url.jpg"]

The video parent element gives you unlimited options on how and when the player appears on your blog page.