I’ve placed a video near the top of my site using the video function. I’d like the video to just play once and not show related videos, but I can’t seem to work out how to do this. I’ve got the switch for looping turned off, but it still loops. Also, I don’t know where I’d put the ‘do not show related videos’ code.
The website where you can see the video is toonboomtrainer.com
Thank you for your help!
Hi There,
Thank you for writing in, Video Player element is for hosted video. Since you’re using a 3rd party video sharing site (YouTube), use the Embedded Video element instead. See this clip on how you can get the embed code from YouTube.
Hope it helps,
Cheers!
Thanks for this. I managed to embed the video from the youtube link, but there is a sizing issue. It doesn’t seem to stick to it’s set size, whether in pixels or percentage. It often looks fine at full screen, but when scaled down for mobile, the video container stretches. I’ve tried 50% in both percentage and pixel amounts, aswell as a third and one quarter, but all produce black bars and display issues when varying the screen size. Also, the preview image of the video is low res, and I’m not sure how to switch this out like you can with the video widget.
Thanks for your assistance.
Hi Adam,
Embedded video element just process the iframe content and it is still depend on the third party source on how it will display, in this case, youtube. Please check the following discussion on why black bars appear and the guide on how to remove them.
http://luisten.com/blog/ultimate-guide-embedding-responsive-youtube-videos/
Regarding thumbnail, see this too: https://medium.com/@simonlidesign/embedding-youtube-video-with-high-quality-thumbnail-956a41dda5c8
Hope this helps.
Thanks although those topics are complicated for me to understand. The reason I bought X theme was to avoid too much coding work as this is not my expertise, and yet these help topics you have linked me to talk of jquery and other things, which seems to be getting a bit over involved for my purposes!
Firstly, I understand that black bars appear when the aspect ratio is incorrect for the video container. I have tried one of the solutions set out, where 100% is the chosen option, but it seems to only work on a large screen. Secondly, the jquery handler whatever that is, where does this go?
And finally, could the video element not be made more useful for videos that are from external sites? Most videos are not hosted on the server due to bandwidth, so I don’t really see how the video is handled better in X theme than just how Wordpress does so natively.
I’d appreciate an example and some hands on help to get this problem corrected, as I’m sure others would benefit from the solution in the future.
Thank you
Hi There,
I did check your site again and there’s no black bars anymore and it is already responsive. See this: https://screencast-o-matic.com/watch/cbQ1eKIimo
That’s because it’s not using the embed code, just the video element option. The embed code was producing poor results, so until I find a solution I will stick with the video element, even if it does show the suggested videos and loops at the end.
Can you offer a practical solution, please?
Thank you in advance.
Hi There,
Would you mind using the Embedded Video element for your YouTube video instead? I tried to replicate the issue (black bars) on my dev site but it did not happen, the iFrame might not be responsive but the Embedded Video element does. There might be a conflicting CSS on your site that mess up the Embedded Video element styling. And make sure to use the 16:9 aspect ratio.
Regarding the low res thumbnail, YouTube provided you an option to upload your own thumbnail on the video settings, please upload a high quality image.
Thanks,
Ahhh thank you! That’s where I went wrong. I used the raw code instead of the embed video option.
It all works great and looks better as a preview image now too, thanks!
Cool, we’re delighted to assist you with this.
Cheers 