Hi Daria,
Delete everything from your tab from the text tab, switch to the visual tab, and try pasting just the youtube URL (e.g. https://www.youtube.com/watch?v=s8Jd9OfyzAs) into your tab. WordPress should auto-embed it.
It can be finicky sometimes – you may need to paste the URL a few times or switch between text and visual.
Let me know if that works.
Cheers,
Kevin.
Kevin,
I pasted the link in tab in visual: https://www.youtube.com/watch?v=s8Jd9OfyzAs and it show me video on backend …
refresh the page F5 – no video
press F12 in Firefox to see what happened – video appears …
again refresh page with F5 – no video
heh, strange …
how can I change video height and width?
Hi Daria,
Weird – I’m seeing the same thing (video shows when I hit F12). As I said, the auto-embeds can be finicky. I’d mess with it for a minute to see if you can get it working.
Styling for iframes is never good but this will change the height and width:
div#tab-video iframe {
width: 75% !important;
height: 500px !important;
}
Hi Kevin,
this resolved the problem, I suppose that video was very big and do not apeared.
However, right now is another problem, because of this css video is not responsive, and also I wood like to align it on a middle (center).
How could I do this? Writing css media?
Thank you.
Hi Daria,
To align it, try changing the margin of the <p> that the video is contained in, like this:
div#tab-video p {
margin-left: 25%;
margin-right: auto;
}
For responsive, use media queries as you said. This will keep the video at 100% width (no margin) for screen sizes below 1000px.
@media ( max-width: 1000px ) {
div#tab-video p {
margin-left: auto;
margin-right: auto;
}
div#tab-video iframe {
width: 100% !important;
height: 500px !important;
}
}
Hi Kevin,
the problem is resolved,
thank you so much.
Post my code here if somebody need.
/*change video iframe setting in woocomerce custom tab*/
div#tab-video iframe {
width: 65% !important;
height: 450px !important;
}
div#tab-video p {
margin-left: 25%;
margin-right: auto;
}
@media ( max-width: 1300px ) {
div#tab-video p {
margin-left: 15%;
margin-right: auto;
}
div#tab-video iframe {
width: 75% !important;
height: 500px !important;
}
}
@media ( max-width: 1000px ) {
div#tab-video p {
margin-left: auto;
margin-right: auto;
}
div#tab-video iframe {
width: 100% !important;
height: 500px !important;
}
}
@media ( max-width: 700px ) {
div#tab-video iframe {
width: 100% !important;
height: 400px !important;
}
}
@media ( max-width: 480px ) {
div#tab-video p {
margin-left: 2%;
margin-right: auto;
}
div#tab-video iframe {
width: 100% !important;
height: 300px !important;
}
}
Brilliant. You’re very welcome Daria. Best of luck with your website 🙂
