I'd like to display a video on my WordPress site in between content, and I'd like that video to take up the full page width, and a fixed height. It's ok that the videos scales and crops as-needed.
I'd also prefer to stream it from YouTube, Vimeo, etc, as the site's performance is somewhat hindered when the video is self-hosted.
Have gotten closest to desired result using the YouTube IFrame player API. The actual container behaves the way I'd like, however the as soon as the video is played, the black bars appear on each side to maintain the video's aspect ratio.
Open to plug-ins and such.
Any guidance would be very much appreciated.
ARVE is a very popular and powerful plugin to display YouTube, Vimeo videos full screen. It uses shortcodes to display videos in posts.
Related
I am using iframe to embed a facebook video. I have changed show_text to "true" to include the description from facebook, and increased the height to around 600px to allow space for it. It works great on larger screens and even shows up when previewing in mobile responsive mode on my laptop, but the description and like/comment/share icons are missing when viewed on my phone. The video is still there but no information. Hoping someone has some ideas about this. Thanks!
https://developers.facebook.com/docs/plugins/embedded-video-player/#settings:
data-show-text
Set to true to include the text from the Facebook post associated with the video, if any. Only available for desktop sites.
So this isn't supposed to work on mobile.
I used the twenty-seventeen customize tool to add an embedded youtube video to my header-media, by only providing a link url.
But it displays with 2 black side bars, on the left and right of the video. From reading other posts, this is how Youtube formatted the video to display. But is there a way to override this somehow?
My work-in-progress website is: www.diatomfilms.com so you can see the problem.
Found this article with quick google search: https://filmora.wondershare.com/youtube-video-editing/remove-youtube-videos-black-bars.html
I guess the fourth solution in the article would be helpful for you because you have already uploaded the video on YouTube.
Click on the Edit button next to the video, and add the most suited
instruction in the Tag bar below:
t:crop=16:9 This tag zooms in on the video because of which the
contents at the borders (black bars in this case) do not appear
anymore.
yt:stretch=16:9 This tag stretches the video in the aspect ratio of
16:9. It is used to view the video in wide-screen format.
yt:stretch=4:3 if your video is appearing in wide-screen format, but
you want it to display in 720 x 480 pixels, apply this tag. It scales
down the video 4:3 aspect.
I've an issue on the homepage of; http://lcpdevelopment.flourishsales.co.uk/
We have a video uploaded as a background, but on some older browsers and mobile devices the video does not play for various reasons, which is fine - but I would like to replace it with an image when it does not play.
I've tried various things but just can't figure out how to place an image over the exact space of the video, only when the video doesn't play?
Check the poster attribute in your code. It's right now redirecting to lcpbg.png, but when I try your website + that image link (so this), I get a 404. Get it to redirect to images/lcpbg.png and it should add a still image.
Okay, this is a strange one. When the embedded video is clicked (on Chrome) to be seen on fullscreen, it's moved on the right because of the sidebar. On Firefox, it's as it should -the video is correctly stretched over the whole site. However, there is something that doesn't allow Chrome to do that.
Okay, I managed to find that this is connected with the animation-fill-mode. And I'm afraid that this is duplicate of HTML5 video won't maximize beyond container dimensions in native full screen mode
I'm having an extremely strange issue with an HTML that has 3 videos on it. I'm using videojs for the videos, and all videos have been converted to three different formats to ensure cross-browser compat.
Having said that, when the videos are played, strange black lines appear on the bottom, or on the right of the videos (This even changes across browsers!!).
I have absolutely no clue where this lines come from, as they don't appear on CSS at all.
Here's the link to show you what I'm talking about:
http://tomascamusso.com/helpme
PS: In case it has become a part of the video itself, is there any common software to edit these videos?
Thanks!
The line is in the background image which the video is overlayed on.
http://tomascamusso.com/helpme/img/hang_on_to_your_assets.png
Now I see the image is hidden when the video is played (display: none;). However it does look like the end of the video the still image from the feed was using the same background image.. worth looking into.
- here is a screenshot.