• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
1

Embedded video will not play in Safari

Explorer ,
Oct 27, 2018 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

Views

5.6K

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
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 28, 2018 Oct 28, 2018

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>

Votes

Translate

Translate
Community Expert ,
Oct 28, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Oct 28, 2018 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

Votes

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
community guidelines
Community Expert ,
Oct 28, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Oct 28, 2018 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?

Votes

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
community guidelines
Explorer ,
Oct 28, 2018 Oct 28, 2018

Copy link to clipboard

Copied

Nancy,

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

Votes

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
community guidelines
Community Expert ,
Oct 28, 2018 Oct 28, 2018

Copy link to clipboard

Copied

Refresh your browser.   You should see player controls.

Firefox

Chrome

MS Edge

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Oct 28, 2018 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.

Votes

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
community guidelines
Community Expert ,
Oct 28, 2018 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Oct 31, 2018 Oct 31, 2018

Copy link to clipboard

Copied

LATEST

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?

Votes

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
community guidelines