Highlighted

Embedded video will not play in Safari

Explorer ,
Oct 27, 2018

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

3.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Embedded video will not play in Safari

Explorer ,
Oct 27, 2018

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

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

3.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 27, 2018 0
Adobe Community Professional ,
Oct 28, 2018

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? 

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Explorer ,
Oct 28, 2018

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:

www.rockthesquares.com

Thanks again,

John

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Adobe Community Professional ,
Oct 28, 2018

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.

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Explorer ,
Oct 28, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Explorer ,
Oct 28, 2018

Copy link to clipboard

Copied

Nancy,

I copied and pasted your code, and don't see any difference.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Adobe Community Professional ,
Oct 28, 2018

Copy link to clipboard

Copied

Refresh your browser.   You should see player controls.

Firefox

Chrome

MS Edge

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Explorer ,
Oct 28, 2018

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
Adobe Community Professional ,
Oct 28, 2018

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>

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
shambles LATEST
Explorer ,
Oct 31, 2018

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 31, 2018 0