How can I place text beside an embedded video player, to create a description?
-
Hello everyone,
First and foremost here is a link to the webpage I am working with: https://christianlplatt.com/media/videolibrary/?page_id=17
I am using a child I made of the Fruitful theme: https://themes.fruitfulcode.com/fruitful/, and my only changes to the theme are a new style.css file, which can be seen here in its entirety:
/* Theme Name: Mark II Theme URI: http: //inbiznez.com/ Description: Fruitful child theme Author: InBiznez, LLC Author URI: http: //inbiznez.com/ Template: fruitful Version: 1.0.0 */ @import url("../fruitful/style.css"); /* =Theme customization starts here -------------------------------------------------------------- */ /* Removes navigation bar */ .main-navigation{ display: none; } /* Removes site title */ .site-title{ display: none; } /* Changes main title settings */ h1.entry-title{ font-weight: bold; font-size: 30px; /* text-decoration: underline; */ color: #1e73be; text-align: center; } /* Removes margins above video player */ .entry-content{ margin: 0 0 0; } /* Removes margins above video player area */ p{ margin: 0 0 1em 0; } /* Removes padding below title */ h1.entry-title{ padding: 0 0 0 0 !important; }
I know I probably didn’t use proper editing style/formatting, but as you can see the site is extremely basic and only meant as a holding tank for a single video. This will be its express purpose, so for this project I am not focused on optimizing the code. Having said that, I am open to suggestions that you all feel are worthy of implementing, as I really don’t know what is best.
The video itself I’ve decided to embed within the WP page itself since I will be making a number of clones of this page but want the video to be different for each. As for the text, it currently is entered under the embed link within the page body, as shown:
<iframe src="//www.youtube.com/embed/cGi4hNgyhik?rel=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> This text should be to the right side of the video, like a description box.
I am quite new to HTML/CSS but I am picking up the basics. I’ve been trying to add some basic rules in order to have the text currently shown below the video on the webpage, but cannot seem to get things right. I’ve tried floats/position/align in styles.css set to alter all manner of div/p selectors and respective classes/IDs, I’ve tried div tags with floats within the text editor of the page on WP, but nothing seems to work.
The more I can have put into the styles.css file, and the less on the page itself, the better. Ideally, I would have everything within styles.css, and simply put in my embed code, and then my text below it and have everything format as I’ve described (to ease creation of clones).
Any help you all can give me on this matter would be greatly appreciated.
- The topic ‘How can I place text beside an embedded video player, to create a description?’ is closed to new replies.