Hello everyone, i’m trying to embed a vimeo video in a post but when i try to change the width of it, it allways keep show something that looks as width 100%. Thanks for your help
embed code : <iframe src=”https://player.vimeo.com/video/312064099″ width=”300″ height=”100″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Hi,
Is look like there is a strong css that is apply over the inline css from iframe embed
Please try to use this custom css -> https://www.screencast.com/t/9ZON4e5beFe
.td-post-content iframe {
max-width: 50% !important;
}
Set the code in Newspaper>theme panel>Custom code>Custom css
Hope this will help you!
Thanks.
Hi Calin,
Thank you very much for your help. It finally seems to work when I reduce the size of a 16/9 video.
In reality, I was trying to insert a 1:1 (square) video into the post with a width=100%, but no way to make this happen, even when i try your CSS code with width 720px or min-width 100%. The square video seems to but locked on a 395×395 pixels size. Here an exemple of video : https://vimeo.com/312906725/58116bfc80
And here on the website : http://zoominvest.fr/2019/01/23/test-video/
Thank you !
Anthony
Hi Calin,
Thank you very much for your help. It finally seems to work when I reduce the size of a 16/9 video.
In reality, I was trying to insert a 1:1 (square) video into the post with a width=100%, but no way to make this happen, even when i try your CSS code with width 720px or min-width 100%. The square video seems to but locked on a 395×395 pixels size. Here an exemple of video : https://vimeo.com/312906725/58116bfc80
And here on the website : http://zoominvest.fr/2019/01/23/test-video/
Thank you !
Anthony
Hi,
Please try this custom css
.td-post-content iframe {
height: 696px!important;
}
.td-post-content .su-responsive-media-yes {
padding-bottom: 100%;
}
-> https://www.screencast.com/t/aQJg44oIoHR
Hope this will help you!
Thanks.
Hi,
Thank you ! It works perfectly on desktop view but the video is croped on mobile view : http://zoominvest.fr/2019/01/23/test-video/
Hope you can help.
Anthony
Hi,
Yes indeed you need to have an auto-size set for height, please re-please the code with this one ->
.td-post-content iframe {
height: 100%!important;
}
.td-post-content .su-responsive-media-yes {
padding-bottom: 100%;
}
Hope this will solve your problem!
Thanks.
great ! thank you for your help !
Hello, sorry but i would have a last question. What would be the appropriate css code in the case i post it as a video in wordpress editor ? Since now i was using the “su” shortcode to embed it.
http://zoominvest.fr/2019/01/23/test-video/
Thank you !
Anthony
Hi,
If you are using embed all you need to do is to set in the code that you get the height and width to 100% -> https://www.screencast.com/t/RFfHN4ox -> https://www.screencast.com/t/VPHbYZfCcJT , also is possible to need to remove the custom css from theme panel.
Thanks.
Hi, no i’m not using embed but the “featured video” tool in the editor and i don’t know where and how to specify the width in order to show a full square video… http://zoominvest.fr/2019/01/23/test-video/
Hi,
Please replace the above custom css with this one ->
@media (min-width: 1141px) {
.post_format-post-format-video .td-post-content iframe {
height: 696px!important;
}
}
@media (min-width: 1019px) and (max-width: 1141px){
.post_format-post-format-video .td-post-content iframe {
height: 640px!important;
}
}
@media (min-width: 768px) and (max-width: 1019px){
.post_format-post-format-video .td-post-content iframe {
height: 484px!important;
}
}
.post_format-post-format-video .td-post-content .su-responsive-media-yes {
padding-bottom: 100%;
}
Thanks.
Hello, is there a way to make this css code activated only for a specific post and not for every post/page of the website ? Thank you !
Hi,
Yes you can do that, you need to set the post id class, for example
-> https://www.screencast.com/t/d8SLYPkRk8p
-> https://www.screencast.com/t/k4dbdYcRi
So for this example
@media (min-width: 1141px) {
.postid-10446 .post_format-post-format-video .td-post-content iframe {
height: 696px!important;
}
}
@media (min-width: 1019px) and (max-width: 1141px){
.postid-10446 .post_format-post-format-video .td-post-content iframe {
height: 640px!important;
}
}
@media (min-width: 768px) and (max-width: 1019px){
.postid-10446 .post_format-post-format-video .td-post-content iframe {
height: 484px!important;
}
}
.postid-10446 .post_format-post-format-video .td-post-content .su-responsive-media-yes {
padding-bottom: 100%;
}
Now the code will apply only on that post with id 10446
Thank you
