tylermw on "[Theme: Tracks] Full-width mp4 video in content?"

Thanks for choosing Tracks! This can be done in two steps with some customization.

The first step is to add the following CSS to the Custom CSS section in the Customizer (Appearance > Customize):

.entry-content .full-width { position: relative; width: 113%; left: -6.5%;
}
@media all and (min-width: 43.75em) { .entry-content .full-width { width: 128.6%; left: -14.3%; }
}
@media all and (min-width: 56.25em) { .entry-content .full-width { width: 150%; left: -25%; }
}
@media all and (min-width: 68.75em) { .entry-content .full-width { width: 163.6%; left: -31.8%; }
}
@media all and (min-width: 75em) { .entry-content .full-width { width: 179.9%; left: -39.95%; }
}

This will allow you to add the full-width CSS class to any element and make it span the full-width of the page.

To do this, begin editing the post with the video in it, and switch the editor view from "Visual" to "Text" mode.

This will let you locate the HTML for the video. Once you've found where the video's HTML code is, you can add a new HTML element to contain it with the "full-width" class.

For instance, let this HTML represent the video in the editor:

<iframe> <video stuff here>
</iframe>

You would add a new div element like this:

<div class="full-width"> <iframe> <video stuff here> </iframe>
</div>

So it's this part before the video <div class="full-width"> and then this part after </div>.

I hope I've explained that clearly. Please give it a shot and let me know if you have any problems along the way.