• Resolved Blyr

    (@blyr)


    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.

Viewing 1 replies (of 1 total)
  • Thread Starter Blyr

    (@blyr)

    Just solved my issue.

    This:

    <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.

    Should have been this:

    <div id="video-wrap">
    <iframe src="//www.youtube.com/embed/cGi4hNgyhik?rel=0&showinfo=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
    </div>
    
    This text should be to the right side of the video, like a description box.

    I simply added the div tags, nothing was changed within the embed code.

    And this bit of code should be added to style.css:

    #video-wrap {
    	float: left;
    	margin: 0 20px 0px 0;
    }

    Of course, “video-wrap” could read anything, but I’m using the information from the tutorial at wpmudev.org.

    Hope this solves anyone else’s issue with a similar problem!

Viewing 1 replies (of 1 total)
  • The topic ‘How can I place text beside an embedded video player, to create a description?’ is closed to new replies.