Embedding a YouTube video in RSD -...

User 2023679 Photo


Registered User
141 posts

When I did this in RLM . . . , on export, I put this code in the HTML in the right place . . .

<div class="cc-video-wrapper"><iframe width="560" height="315" src="https://www.youtube.com/embed/5s643PG7gog" frameborder="0" allowfullscreen></iframe></div>

. . . and this code in the custom css file that I was using . . .

.cc-video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}

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

And that all worked great of course. So now, in RSD . . . , I've added the HTML code into an HTML element on the page. But where do I put the CSS code? Do I need to create a custom css sheet (and link to it in the head section) for my exported RSD project? Or do it as an inline style? (I did that when centering my Lightboxes, but it wasn't a lot of code) Or . . . ?

Any ideas of the best way to go? Is there some trick in RSD I'm not aware of?
User 187934 Photo


Senior Advisor
20,271 posts

Make a custom sheet and use the resource tool to add it to your site.
Then add a link to it in the head of your page.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2023679 Photo


Registered User
141 posts

You are always teaching me something new and helping me get my mind around the program. It didn't occur to me to use the the resource tool. Doh! :P I envisioned adding it manually to my exported file group. I would have been working way too hard! :rolleyes: Thanks for the great tip! That one idea will help with a number of things I will be doing.
User 2509861 Photo


Registered User
2 posts

I am trying to do the same thing but I'm a bit more challenged with this that you guys are. I understand html very little and I don't understand CSS at all. Could anyone help walk me through this a bit?

I just want to put a youtube video at the bottom of my page without it causing the page to be wider than the screen when viewing on hand held devices. When I embed the video onto the page, it is fine on a computer but does not shrink enough on phones.
User 103173 Photo


VP of Software Development
0 posts

Joshua Grove wrote:
I am trying to do the same thing but I'm a bit more challenged with this that you guys are. I understand html very little and I don't understand CSS at all. Could anyone help walk me through this a bit?

I just want to put a youtube video at the bottom of my page without it causing the page to be wider than the screen when viewing on hand held devices. When I embed the video onto the page, it is fine on a computer but does not shrink enough on phones.

Go to http://embedresponsively.com/ and paste in the URL to the video on Youtube. You will then take their embed code and add that to RSD using the HTML element. This will give you a fully responsive video.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 2699991 Photo


Registered User
5,399 posts
Online Now

Joshua Grove wrote:
I am trying to do the same thing but I'm a bit more challenged with this that you guys are. I understand html very little and I don't understand CSS at all. Could anyone help walk me through this a bit?

I just want to put a youtube video at the bottom of my page without it causing the page to be wider than the screen when viewing on hand held devices. When I embed the video onto the page, it is fine on a computer but does not shrink enough on phones.


One of the forum guys "Jeff" has put a great video up on youtube about all this
https://www.youtube.com/watch?v=kip6xRYe9kM

Have a look it's very easy to follow and gets great results
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.