Docs

[Artem]

I am really new to coding, developing, and so much more. I am learning by reading millions of forms and by trial and error. I got pretty far! 🙂 One thing I am having issue is with a current project I am working on. The issue is the streaming iframe is not being responsive. The support of the streaming company has given a solution. I only got to the css solution and having trouble with the div class assignment. I have no idea where to place it. Here are their instructions: (website dev.newlifeatlanta.org/live-stream/)

Making your StreamSpot player responsive means that it will automatically “adapt” to the size of the container in which it’s placed. By just adding a few lines of code to your website’s CSS (Cascading Style Sheet), you can make your player responsive.

1. Ask your webmaster to add the following lines to your website’s CSS code:

.video-container {
position: relative;
height: 0;
overflow: hidden;
}

/* 16×9 Aspect Ratio */
.video-container-16×9 {
padding-bottom: 56.25%;
}

/* 4×3 Aspect Ratio */
.video-container-4×3 {
padding-bottom: 75%;
}

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

2. Simply place your StreamSpot embed code between the <div class=”video-container”> tags for your newly created class. An example is below:

<div class=”video-container”>
<iframe width=”640″ height=”360″ src=”https://player2.streamspot.com/?playerId=YOURPLAYERID&#8221; frameborder=”0″ allowfullscreen></iframe>
</div>
Now your StreamSpot player will automatically adjust to any screen size automatically.

I have dont the css through child theme. I dont know where to but the div class. Do I put it in global in a certain .php? I have tried to add the div class to the TEXT field but the player doesnt show. My only assumption is I dont have the div class assigned.

[Artem]

bump…i know this this common css or html knowledge. I just need to be pointed in the right direction! 🙂

[Artem]

i think i maybe assigning the classes wrong. Is .video-container incorrect?

[John Ezra]

Hi there,

Thanks for writing in! First off, please don’t bump your threads as this has a negative effect on it. Our system lines up posts in chronological order, so bumping your thread actually ends up putting it back at the end of the line.

Regarding your query.

The CSS they provided goes in the customizer. Appearance > Customize > Custom > Custom Code >> Edit Global CSS

Within Cornerstone, you can use the text or raw elements to enter the sample code format they have given.

<div class="video-container">
<iframe width="640" height="360" src="https://player2.streamspot.com/?playerId=YOURPLAYERID" frameborder="0" allowfullscreen></iframe>
</div>

Note: I have put the code they provided here in code tags so you can safely copy and paste it. Sometimes copying and pasting into none code editors, like into word processors or websites can reformat some code syntax. This will cause errors and your code may not work because of it. For example, your pasted code has quotation marks that have been reformatted to two types of quotes. Curly quotes and slanted straight quotes. I have corrected them in the above code so it is safe to copy and paste.

Regarding the class .video-container, you only use this format (with the period) within the CSS syntax. In HTML you just put it as class="video-container" without the period.

Likewise if you are using the class field in the element options to put in the class name, you don’t need to add the period or the class=”…” wrapper. Just simply put in video-container.

If you still run into issues, please provide us with login credentials so we can take a closer look. To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Let us know how that goes. Hope this helps – thanks!

[Artem]

Thank you! I apologize for the bump and thank you for all the advice on how to post properly. I was able to successfully recall the div class but it still doesnt work (doesnt load properly). I have contact the stream provider to help fine tune the code. Thank you for an awesome response! 🙂

[Darshana]

Glad we were able to help 🙂

[Author]

Posts