- This topic has 8 replies, 2 voices, and was last updated 6 years, 2 months ago by
.
I made a custom code in slider element so I can add youtube video as background to slide. I did it using a plugin for adding featured video to blog post.
Youtube video can only be included with iframe html tag and that’s what I used. I edited the blog slider element for wp bakery page builder to render the featured video as background.
I added custom css code to iframe with position absolute (because It should be a background)
You can see html markup on my site: mintv.rs (the iframe is currently commented so it dosen’t cause problems I am going to explain and it uses hardcoded youtube video url because of testing).
When there is no iframe everything works and looks fine. The vc_row html element has attribute to be full width, and inline css with width and position properites (you can see that on the website). But when I add iframe, the whole slider is not full width, actually it is a full width of a bootstrap .container parent element, it’s centered and there is whitespace on both sides. I noticed this is all because .vc_row doesn’t have inline css that sets it’s width to viewport width (1903px on my screen).
Before iframe, I used video html element to show video background from video on server, with the same css as iframe, it worked just fine. It only breaks when I use iframe. I don’t know the reason for this, so I don’t know how to solve it.
Hi @amplitum,
I hope you are well today and thank you for your detailed question.
Could you please reproduce the issue on your site or any of your site page so that i can troubleshoot it?
Best regards,
Shufflehound teamIssue is reproduced now.
You can make it full width by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.home #page-container .sh-pagebuilder-content > .container { width: 100% !important; max-width: 100% !important; }This solves the problem, but it also makes content after the slader full width because it’s also in the container.
To resolve it please also use the following custom CSS code.
@media (min-width: 1250px){ .home #page-container .vc_custom_1514470741762, .home #page-container .vc_custom_1514470713482 { max-width: 1100px!important; width: 1100px!important; margin: 0 auto 80px !important; } }There is also a second problem I haven’t noticed until now.
In slick slider prev and next arrow contained info about previous and next post in the slider. No it isn’t shown (it can’t be seen on the site now).
Also the content of these two divs are not in the DOM anymore, there is no html in them, but it is there when iframe is not in the slide.
Again it’s the problem with that iframe, I removed it and everything was there, I put it back, the content is not shown.
Also the whole section is missing when I put iframe in slide. Screenshot in the attachment contains a section called “Citanje” with posts slider. It’s not visible in the site anymore, it’s because slick doesn’t initialize for some reason.
There is also a problem with add, it’s on the right side with title “Reklama”. It should stick to the screen at some scroll point but now, it’doesn’t get fixed to the screen.
It seems visual composer Blog slider doesn’t work well with iframe so you have to try alternate options to achieve this until the plugin developer fixes the issue.
