Jump to content
marcbkk

Adding Code To Make A Responsive 100% Width YouTube iFrame Embed

Recommended Posts

marcbkk

I installed the Pagelines Customize Plugin then I added the following code to the Style.css file within the plugin folder:

.container {

    position: relative;

    width: 100%;

    height: 0;

    padding-bottom: 56.25%;

}

.video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

This code is used to make a responsive 100% width with YouTube iFrame embed.

After adding the code though it has had no effect on the Platform theme I a running when I embed YouTube iFrame links like so:

<center><div class="container"><iframe src="https://www.youtube.com/embed/XXXXXXXXXX?rel=0&amp;frameborder=0&amp;showinfo=0&amp;modestbranding=1" allowfullscreen class="video"></iframe></center></div>

Did I perhaps do something wrong with the CSS code?

I have amended other themes with this code by adding it to the Style.css file and it has worked without problem.

Any suggestions would be much appreciated.

 

 

Share this post


Link to post
Share on other sites
Andrew

you need a class of 'video' to the iframe :)

Share this post


Link to post
Share on other sites
marcbkk

Thank you Andrew. Sorry, I am not sure what code you are suggesting is missing. Perhaps you could be just a bit more specific please?

But just to reconfirm, I have been using all the above code and the iFrame link on other themes on my other sites and no problem with the link as I have it above.

Thanks.

Share this post


Link to post
Share on other sites
Andrew

your posted CSS has a reference to a class of video.. (.video) and in your actual HTML you haven't added that class to the iframe element. That help? :)

  • Like 1

Share this post


Link to post
Share on other sites
marcbkk

Thank you so much for clarifying Andrew. But the HTML code link I posted above contains: class="video"

Is that not correct?

Also, after I added that CSS code to the Pagelines Customize Plugin it should effect and work with the Platform theme in running, correct?

Many thanks again. 

Share this post


Link to post
Share on other sites
Andrew

ah right, i see it there at the end... do you have a live link then? i could use the inspector to figure this... it should work but your issue could be the iframe also, these days people typically use HTML5 video elements.

Share this post


Link to post
Share on other sites
marcbkk

Thank you Andrew. I don't have a live post running with a sample of that HTML link because of the fact it doesn't work.

I do have a draft post with that link I'm using for testing, but unless your a site admin I guess there is no way for you to see that?

Or do you perhaps have a test site of your own with pagelines running the platform theme where you could drop in the CSS code I'm using that I provided above and also use my HTML link to test with? I'm assuming your results would be the same  

I'm not sure there are any issues related to HTML5 though on my site. If I simply switch the theme to another theme on my site, and using the same CSS code and HTML link, then it works fine. I've tested it. 

Well, really hoping we can get this sorted somehow and much appreciated for your support. 

Share this post


Link to post
Share on other sites
marcbkk
13 hours ago, Andrew said:

ah right, i see it there at the end... do you have a live link then? i could use the inspector to figure this... it should work but your issue could be the iframe also, these days people typically use HTML5 video elements.

I have now ran the inspector on my test post and screen shotted the code for you on the youtube link element. In the screenshot you can also see how the youtube embedded video shows as just a small video thumbnail and not at full screen width as it should be doing according to the CSS code entered.

Test.jpgphoto hosting sites

 

Sorry, if you click on the screenshot image above it will load on the site where it is being hosted and then click on the image again from the site and it will enlarge to full screen so you can read the code text better.

Share this post


Link to post
Share on other sites
Andrew

i would have to try the inspector on the actual video element to see whats going on... 

Share this post


Link to post
Share on other sites
marcbkk

I have created a contributor account for you on the subject website and then created a test post under the contributor account which contains the HTML link so that you can log in and then preview the test post in order to run the inspector on it yourself.

Is there some way I can perhaps message you the login details I created for you? I see there is no PM system unfortunately within this forum it seems.

Share this post


Link to post
Share on other sites
Andrew

can you live link me a page with the problem? i can't login to peoples sites for issues like this unfortunately (only for high priority pagelines bugs)

 

Share this post


Link to post
Share on other sites
marcbkk
9 hours ago, Andrew said:

can you live link me a page with the problem? i can't login to peoples sites for issues like this unfortunately (only for high priority pagelines bugs)

 

Thanks Andrew, but I don't have any live pages with the problem in it because I wouldn't want for the problem to appear on my site since the site is live. I am sorry, but it is too disruptive. This is why I created a draft post with the problem and suggested I have you login to see it. If you can't do that then no problem.

Even though I have been happily using Platform for about 3-4 years, this is becoming a deal breaker and I may just switch to another theme where the problem doesn't exist.

At this point I am customizing some other themes to see which one works the best. I will let you know if I decide to stick with Pagelines or not.

Thanks again.

Share this post


Link to post
Share on other sites
marcbkk

Andrew - I've switched to another theme and am no longer using Pagelines. Platform lacked functionality i was needing in a number of other areas as well. So changing themes made the most sense. Thanks again. You can close this topic if you like. Best wishes. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×