Pre-order question

Hi!´´
This is a pre-order question.

I’d like to know if the video featuring on header will be displayed also in mobile devices.

Thank you.

No Video Headers ever show up on mobile. Have to have a play button.

Hi,

As explained above, videos are displayed but don’t autoplay on mobile devices. This is mobile defined behavior so it doesn’t matter how you implement your video.

Ok.
But you can assure that besides that, when playing the video it will properly adapt to any device, right?

Yeap. Astrid Pro lets you add a shortcode for the header and that shortcode can be for any plugin that has video capabilities or even the default video shortcode.

Here for example I’ve added the default WP video shortcode with a few lines of custom CSS to force it to full width: http://demo.athemes.com/docs/

You can try it on mobile. Most Androids for example play it in the header, while iphones open it in a lightbox. That’s not something that phones let you control, like you can’t control the autoplay feature on mobiles.

Hi Vlad!

Hi already bought Astrid Pro :slight_smile:

Thanks for your answer. Have you used a plugin to generate the video shortcode?If so, which one? Or you’ve uploaded a video to the media gallery?

Hi,

Nope, I just used the video shortcode from WordPress: https://codex.wordpress.org/Video_Shortcode
Videos need to be uploaded in the media gallery.

And this is the code you can add in a custom CSS plugin to make it full width and hide the controls on large screens if you want:


.shortcode-area .wp-video {
	width: 100% !important;
	vertical-align: bottom;
}
@media only screen and (min-width: 1025px) {
	.shortcode-area .mejs-controls {
             display: none !important;
	}
}

Coooool!

Thanks a lot!

Sorry but all videos I test retrive “error loading this source”.

I’m using [video src=“small.mp4”]

You need to add the full link to your video. Like http://yoursite.com/wp-content/uploads/video.mp4

Of course…

working!

Just one more question: which dimensions do you think the video should have to perfectly adapt full width layout? :slight_smile:

Thanks

Well the code I gave you stretches the video regardless of its resolution.
The actual video size you use depends on what screen sizes you want to target. Ideally, you’d have an 1920px width but that might result in a huge video, especially if it’s lengthy. So you need to find a compromise based on what works best for you and the quality of video you want.

Hi Vlad.

I tried those css lines and also the same video but it does not stretch…what’s missing? :confused:

Can you post a link to your website please?

Sorry I already asked to my webmaster to publish the website but it isn’t available to an external network so far :confused:

I downloaded the video here https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4?_=1

converted to mp4, upload to media gallery and this is the code:

shortcode-area .wp-video {
width: 100% !important;
vertical-align: bottom;
}
@media only screen and (min-width: 1025px) {
.shortcode-area .mejs-controls {
display: none !important;
}
}

Well if you have it exactly as you’ve pasted it here, you’re missing a starting dot ( . ) on your first line. Check the diff with the code I’ve posted.

Meanwhile, another question (maybe it shuld be a new topic???)

I added the logo going through customize menu, Site branding but it does not appear. Is there any widget I should add or something???

Its dimensons are 200x200 and I want it to display above the video in header.

Gosh…yeah I missed that dot :confused: sorry for that…it’s perfect.

Yeah, you should open another topic.

The thing is no one’s answering :slight_smile: