Copy link to clipboard
Copied
I've been working on this a while, and can't figure it out. I upload an mp4 file to the assets folder, insert the HTML code for that asset on the website page, and it plays fine on my Firefox browser, but not on Safari. All I get with Safari is a still photos of the first frame. Any ideas?
Message was edited by: JOHN SHAMBLIN
Add some CSS to your custom <head> tag.
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio*/
padding-top: 25px;
height: 0;
}
.videoWrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
]
</style>
And then wrap your <video> inside a division tag.
<div class="videoWrapper">
<video controls autoplay>
<source src="assets/danceexpress.mp4" type="video/mp4">
</video>
</div>
Copy link to clipboard
Copied
It's hard to say without more info. Can you show us the embed code you used?
Or better still, post the URL to your online page?
Copy link to clipboard
Copied
Hi Nancy,
Thanks for your prompt reply. I found the problem. I had added autoplay to the HTML I inserted on the home page. I didn't realize that I needed to set it to "Allow All Auto Play" in the Safari preferences>websites. It works fine now.
Here's the code:
<video width="720" height="500" autoplay>
<source src="assets/danceexpress.mp4" type="video/mp4">
</video>
Here's the URL:
Thanks again,
John
Copy link to clipboard
Copied
It might work for you on your device with your browser settings but it does not work for me and countless other people for whom autoplay is disabled by default -- particularly when an audio track is present.
To be on the safe side, you should cater to the largest audience possible and offer player controls. Otherwise many people like me will never know video is available. Change your embed code to this:
<video width="720" height="500" controls autoplay>
<source src="assets/danceexpress.mp4" type="video/mp4">
</video>
Also test your project in multiple devices and browsers. The results might surprise you.
Copy link to clipboard
Copied
Hi Nancy,
Thanks for the input. I've been experimenting in Muse, but ain't figured out how to make it display correctly on both a desktop and an iPhone. I suspect most people will be looking at it on their phone, so what do you recommend?
Copy link to clipboard
Copied
Nancy,
I copied and pasted your code, and don't see any difference.
Copy link to clipboard
Copied
Refresh your browser. You should see player controls.
Firefox
Chrome
MS Edge
Copy link to clipboard
Copied
I did. You're exacly right. Any advice on migrating it to the phone display? Still aint figured that out.
Copy link to clipboard
Copied
Add some CSS to your custom <head> tag.
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio*/
padding-top: 25px;
height: 0;
}
.videoWrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
]
</style>
And then wrap your <video> inside a division tag.
<div class="videoWrapper">
<video controls autoplay>
<source src="assets/danceexpress.mp4" type="video/mp4">
</video>
</div>
Copy link to clipboard
Copied
Hello again, Nancy. I sure appreciate your expert advice. I'm a pretty old dog to be learning new tricks, but I'm tenacious. I guess I got your code entered correctly because the video now scales nicely for phone-size browsers.
Any suggestions on how to get rid of the excessive white space between the items in the phone view?