.htaccessでPHPのファイルアップロードサイズの上限値を変更
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
ホームページ内に動画を設置する際にYouTubeを利用する場合は多い。
YouTubeの埋め込み自体は、対象の動画ページから埋め込みタグを取得して設置することで可能ですが、読み込みに時間がかかるため軽量化してほしいとの相談があったので解決した時の実装方法をメモ
<ul class="youtube__list">
<li>
<div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div>
</li>
<li>
<div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div>
</li>
<li>
<div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div>
</li>
</ul>
$(function(){
var fast_movies = [];
var fast_movies_w = [];
var fast_movies_h = [];
$('.youtube__fast iframe').each(function(index, element) {
var fast_srcs = $(this).attr('data-src');
fast_movies[index] = fast_srcs.split('/');
fast_movies_w[index] = $('.youtube__fast').width();
fast_movies_h[index] = $('.youtube__fast').width() * 0.5625;
//置き換え
$(this).after('<div class="youtube__play" style="height: '+fast_movies_h[index]+'px"><img src="https://img.youtube.com/vi/'+fast_movies[index][fast_movies[index].length -1]+ '/maxresdefault.jpg" width="' + fast_movies_w[index] + '" height="'+fast_movies_h[index]+'"></div>').remove();
});
$('.youtube__play').each(function(index, element) {
$(this).hover(function(){
$(this).after('<div class="youtube__frame"><iframe width="'+fast_movies_w[index]+'" height="'+fast_movies_h[index]+'" src="https://www.youtube.com/embed/'+fast_movies[index][fast_movies[index].length -1]+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>').remove();
});
});
});
.youtube__list {
display: flex;
width: 1100px;
margin: 20px auto 0;
}
.youtube__list li {
width: 350px;
}
.youtube__list li + li {
margin-left: auto;
}
@media screen and (max-width: 768px) {
.youtube__list {
display: block;
width: 97%;
}
.youtube__list li {
width: 100%;
}
.youtube__list li + li {
margin: 10px 0 0;
}
}
.youtube__frame {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.youtube__frame iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.youtube__play {
position: relative;
cursor: pointer;
}
.youtube_play img {
width: 100%;
height: 100%;
object-fit: cover;
}
.youtube_play::after {
content: "";
display: block;
background: url(YouTubeアイコン.png);
background-size: 100% auto;
width: 70px;
height: 50px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
初回読み込み時にYouTubeの読み込みタグ(iframe)を画像に置換。
オンマウス時に再置換してYouTubeタグに戻しています。
スマートフォンではマウスオーバーが使えないためクリックが一回分増えます。
2022.02.5
PHPを使用して画像(動画・PDF等)をアップロードするフォームを作成した際に、ファイル…
2020.10.3
テキストエリア等で入力した文字の中にURLを含んでいた場合に、自動で認識してリンクタグを…
2024.03.30
外部ファイル(CSVファイル等)を読み込んでサイト内に表示する際に、保存時の文字コードが…
2020.12.5
メールフォームからメールを送信する際に、画像(ファイル)を添付できるようにしてほしいとの…
2023.12.2
ワードプレスの投稿のカテゴリー機能を、目的ごとに使い分けたいというご要望があった際に、カ…
2022.02.19
画像データ等をサーバーにアップロードする際、一点づつアップロードしても良いけれど、ファイ…
2019.12.29
メールフォーム等での入力値チェック(バリデーション)。PHPの「preg_match」(…
2020.08.1
動画ファイルをCMS化して保存するときに、多くの場合はファイルパスをデータベース(MyS…
2020.08.15
フォームの入力値やURLのパラメータ等、文字列や数値を受け取る際に正規表現を利用してバリ…
2022.09.24
パソコンやスマートフォンの戻るボタンを使って画面を戻す(ブラウザバックする)時があります…